Form
Form (폼 컬렉션)
Form은 사용자 입력을 받기 위한 폼 요소들의 모음이에요. 필드, 텍스트 영역, 체크박스, 라디오, 드롭다운, 캘린더 같은 다양한 입력 요소를 한데 묶어 시맨틱하게 구성할 수 있어요.
출처: 문서
본문
Types (유형)
Form (폼)
폼이에요.
First Name (이름)
Last Name (성)
I agree to the Terms and Conditions (이용약관에 동의합니다)
Submit (제출)
Shipping Information (배송 정보)
Name (이름)
Billing Address (청구 주소)
State (주)
State (주)
Alabama
Alaska
Arizona
Arkansas
California
Colorado
Connecticut
Delaware
District Of Columbia
Florida
Georgia
Hawaii
Idaho
Illinois
Indiana
Iowa
Kansas
Kentucky
Louisiana
Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Nebraska
Nevada
New Hampshire
New Jersey
New Mexico
New York
North Carolina
North Dakota
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming
Country (국가)
Select Country (국가 선택)
Afghanistan
Aland Islands
Albania
Algeria
American Samoa
Andorra
Angola
Anguilla
Antigua
Argentina
Armenia
Aruba
Australia
Austria
Azerbaijan
Bahamas
Bahrain
Bangladesh
Barbados
Belarus
Belgium
Belize
Benin
Bermuda
Bhutan
Bolivia
Bosnia
Botswana
Bouvet Island
Brazil
British Virgin Islands
Brunei
Bulgaria
Burkina Faso
Burma
Burundi
Caicos Islands
Cambodia
Cameroon
Canada
Cape Verde
Cayman Islands
Central African Republic
Chad
Chile
China
Christmas Island
Cocos Islands
Colombia
Comoros
Congo Brazzaville
Congo
Cook Islands
Costa Rica
Cote Divoire
Croatia
Cuba
Cyprus
Czech Republic
Denmark
Djibouti
Dominica
Dominican Republic
Ecuador
Egypt
El Salvador
England
Equatorial Guinea
Eritrea
Estonia
Ethiopia
European Union
Falkland Islands
Faroe Islands
Fiji
Finland
France
French Guiana
French Polynesia
French Territories
Gabon
Gambia
Georgia
Germany
Ghana
Gibraltar
Greece
Greenland
Grenada
Guadeloupe
Guam
Guatemala
Guinea-Bissau
Guinea
Guyana
Haiti
Heard Island
Honduras
Hong Kong
Hungary
Iceland
India
Indian Ocean Territory
Indonesia
Iran
Iraq
Ireland
Israel
Italy
Jamaica
Japan
Jordan
Kazakhstan
Kenya
Kiribati
Kuwait
Kyrgyzstan
Laos
Latvia
Lebanon
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
Macau
Macedonia
Madagascar
Malawi
Malaysia
Maldives
Mali
Malta
Marshall Islands
Martinique
Mauritania
Mauritius
Mayotte
Mexico
Micronesia
Moldova
Monaco
Mongolia
Montenegro
Montserrat
Morocco
Mozambique
Namibia
Nauru
Nepal
Netherlands Antilles
Netherlands
New Caledonia
New Guinea
New Zealand
Nicaragua
Niger
Nigeria
Niue
Norfolk Island
North Korea
Northern Mariana Islands
Norway
Oman
Pakistan
Palau
Palestine
Panama
Paraguay
Peru
Philippines
Pitcairn Islands
Poland
Portugal
Puerto Rico
Qatar
Reunion
Romania
Russia
Rwanda
Saint Helena
Saint Kitts and Nevis
Saint Lucia
Saint Pierre
Saint Vincent
Samoa
San Marino
Sandwich Islands
Sao Tome
Saudi Arabia
Senegal
Serbia
Serbia
Seychelles
Sierra Leone
Singapore
Slovakia
Slovenia
Solomon Islands
Somalia
South Africa
South Korea
Spain
Sri Lanka
Sudan
Suriname
Svalbard
Swaziland
Sweden
Switzerland
Syria
Taiwan
Tajikistan
Tanzania
Thailand
Timorleste
Togo
Tokelau
Tonga
Trinidad
Tunisia
Turkey
Turkmenistan
Tuvalu
Uganda
Ukraine
United Arab Emirates
United States
Uruguay
Us Minor Islands
Us Virgin Islands
Uzbekistan
Vanuatu
Vatican City
Venezuela
Vietnam
Wallis and Futuna
Western Sahara
Yemen
Zambia
Zimbabwe
Card Type (카드 유형)
Type (유형)
Visa
American Express
Discover
Card Number (카드 번호)
CVC
Expiration (만료일)
Month (월)
January
February
March
April
May
June
July
August
September
October
November
December
Send Receipt To: (영수증을 보낼 곳:)
Saved Contacts (저장된 연락처)
Jenny Hess
Elliot Fu
Stevie Feliciano
Christian
Matt
Justen Kitsune
Do not include a receipt in the package (패키지에 영수증을 포함하지 마세요)
Submit Order (주문 제출)
Content (콘텐츠)
Field (필드)
필드는 라벨과 입력 요소를 포함하는 폼 요소예요.
User Input (사용자 입력)
Fields (필드들)
여러 필드가 한데 묶여 나타날 수 있어요.
First name (이름)
Middle name (중간 이름)
Last name (성)
First name (이름)
Middle name (중간 이름)
Last name (성)
Name (이름)
Text Area (텍스트 영역)
textarea는 확장된 사용자 입력을 허용하는 데 사용할 수 있어요.
대략적인 텍스트 영역 크기를 지정하려면 `rows` 속성을 사용해요.
Text (텍스트)
Short Text (짧은 텍스트)
Checkbox (체크박스)
폼에는 체크박스를 포함할 수 있어요.
UI 체크박스는 표준 HTML 체크박스의 특별하고 스타일된 버전이에요.
$('.ui.checkbox')
.checkbox()
;
Checkbox (체크박스)
Slider (슬라이더)
Toggle (토글)
Radio Checkbox (라디오 체크박스)
폼에는 라디오 체크박스를 포함할 수 있어요.
$('.ui.radio.checkbox')
.checkbox()
;
Select your favorite fruit: (좋아하는 과일을 선택하세요:)
Apples (사과)
Oranges (오렌지)
Pears (배)
Grapefruit (자몽)
Select your second favorite fruit: (두 번째로 좋아하는 과일을 선택하세요:)
Apples (사과)
Oranges (오렌지)
Pears (배)
Grapefruit (자몽)
Dropdown (드롭다운)
폼에는 드롭다운을 포함할 수 있어요.
$('.selection.dropdown')
.dropdown()
;
Gender (성별)
Gender (성별)
Male (남성)
Female (여성)
Country (국가)
Select Country (국가 선택)
Afghanistan
Åland Islands
Albania
Algeria
American Samoa
Andorra
Angola
Anguilla
Antarctica
Antigua and Barbuda
Argentina
Armenia
Aruba
Australia
Austria
Azerbaijan
Bahamas
Bahrain
Bangladesh
Barbados
Belarus
Belgium
Belize
Benin
Bermuda
Bhutan
Bolivia, Plurinational State of
Bonaire, Sint Eustatius and Saba
Bosnia and Herzegovina
Botswana
Bouvet Island
Brazil
British Indian Ocean Territory
Brunei Darussalam
Bulgaria
Burkina Faso
Burundi
Cambodia
Cameroon
Canada
Cape Verde
Cayman Islands
Central African Republic
Chad
Chile
China
Christmas Island
Cocos (Keeling) Islands
Colombia
Comoros
Congo
Congo, the Democratic Republic of the
Cook Islands
Costa Rica
Côte d'Ivoire
Croatia
Cuba
Curaçao
Cyprus
Czech Republic
Denmark
Djibouti
Dominica
Dominican Republic
Ecuador
Egypt
El Salvador
Equatorial Guinea
Eritrea
Estonia
Ethiopia
Falkland Islands (Malvinas)
Faroe Islands
Fiji
Finland
France
French Guiana
French Polynesia
French Southern Territories
Gabon
Gambia
Georgia
Germany
Ghana
Gibraltar
Greece
Greenland
Grenada
Guadeloupe
Guam
Guatemala
Guernsey
Guinea
Guinea-Bissau
Guyana
Haiti
Heard Island and McDonald Islands
Holy See (Vatican City State)
Honduras
Hong Kong
Hungary
Iceland
India
Indonesia
Iran, Islamic Republic of
Iraq
Ireland
Isle of Man
Israel
Italy
Jamaica
Japan
Jersey
Jordan
Kazakhstan
Kenya
Kiribati
Korea, Democratic People's Republic of
Korea, Republic of
Kuwait
Kyrgyzstan
Lao People's Democratic Republic
Latvia
Lebanon
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
Macao
Macedonia, the former Yugoslav Republic of
Madagascar
Malawi
Malaysia
Maldives
Mali
Malta
Marshall Islands
Martinique
Mauritania
Mauritius
Mayotte
Mexico
Micronesia, Federated States of
Moldova, Republic of
Monaco
Mongolia
Montenegro
Montserrat
Morocco
Mozambique
Myanmar
Namibia
Nauru
Nepal
Netherlands
New Caledonia
New Zealand
Nicaragua
Niger
Nigeria
Niue
Norfolk Island
Northern Mariana Islands
Norway
Oman
Pakistan
Palau
Palestinian Territory, Occupied
Panama
Papua New Guinea
Paraguay
Peru
Philippines
Pitcairn
Poland
Portugal
Puerto Rico
Qatar
Réunion
Romania
Russian Federation
Rwanda
Saint Barthélemy
Saint Helena, Ascension and Tristan da Cunha
Saint Kitts and Nevis
Saint Lucia
Saint Martin (French part)
Saint Pierre and Miquelon
Saint Vincent and the Grenadines
Samoa
San Marino
Sao Tome and Principe
Saudi Arabia
Senegal
Serbia
Seychelles
Sierra Leone
Singapore
Sint Maarten (Dutch part)
Slovakia
Slovenia
Solomon Islands
Somalia
South Africa
South Georgia and the South Sandwich Islands
South Sudan
Spain
Sri Lanka
Sudan
Suriname
Svalbard and Jan Mayen
Swaziland
Sweden
Switzerland
Syrian Arab Republic
Taiwan, Province of China
Tajikistan
Tanzania, United Republic of
Thailand
Timor-Leste
Togo
Tokelau
Tonga
Trinidad and Tobago
Tunisia
Turkey
Turkmenistan
Turks and Caicos Islands
Tuvalu
Uganda
Ukraine
United Arab Emirates
United Kingdom
United States
United States Minor Outlying Islands
Uruguay
Uzbekistan
Vanuatu
Venezuela, Bolivarian Republic of
Viet Nam
Virgin Islands, British
Virgin Islands, U.S.
Wallis and Futuna
Western Sahara
Yemen
Zambia
Zimbabwe
Multiple Select (다중 선택)
다중 선택은 하나의 폼 필드로 여러 선택지를 포함하는 데 사용돼요.
Country (국가)
Select Country (국가 선택)
Afghanistan
Åland Islands
Albania
Algeria
American Samoa
Andorra
Angola
Anguilla
Antarctica
Antigua and Barbuda
Argentina
Armenia
Aruba
Australia
Austria
Azerbaijan
Bahamas
Bahrain
Bangladesh
Barbados
Belarus
Belgium
Belize
Benin
Bermuda
Bhutan
Bolivia, Plurinational State of
Bonaire, Sint Eustatius and Saba
Bosnia and Herzegovina
Botswana
Bouvet Island
Brazil
British Indian Ocean Territory
Brunei Darussalam
Bulgaria
Burkina Faso
Burundi
Cambodia
Cameroon
Canada
Cape Verde
Cayman Islands
Central African Republic
Chad
Chile
China
Christmas Island
Cocos (Keeling) Islands
Colombia
Comoros
Congo
Congo, the Democratic Republic of the
Cook Islands
Costa Rica
Côte d'Ivoire
Croatia
Cuba
Curaçao
Cyprus
Czech Republic
Denmark
Djibouti
Dominica
Dominican Republic
Ecuador
Egypt
El Salvador
Equatorial Guinea
Eritrea
Estonia
Ethiopia
Falkland Islands (Malvinas)
Faroe Islands
Fiji
Finland
France
French Guiana
French Polynesia
French Southern Territories
Gabon
Gambia
Georgia
Germany
Ghana
Gibraltar
Greece
Greenland
Grenada
Guadeloupe
Guam
Guatemala
Guernsey
Guinea
Guinea-Bissau
Guyana
Haiti
Heard Island and McDonald Islands
Holy See (Vatican City State)
Honduras
Hong Kong
Hungary
Iceland
India
Indonesia
Iran, Islamic Republic of
Iraq
Ireland
Isle of Man
Israel
Italy
Jamaica
Japan
Jersey
Jordan
Kazakhstan
Kenya
Kiribati
Korea, Democratic People's Republic of
Korea, Republic of
Kuwait
Kyrgyzstan
Lao People's Democratic Republic
Latvia
Lebanon
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
Macao
Macedonia, the former Yugoslav Republic of
Madagascar
Malawi
Malaysia
Maldives
Mali
Malta
Marshall Islands
Martinique
Mauritania
Mauritius
Mayotte
Mexico
Micronesia, Federated States of
Moldova, Republic of
Monaco
Mongolia
Montenegro
Montserrat
Morocco
Mozambique
Myanmar
Namibia
Nauru
Nepal
Netherlands
New Caledonia
New Zealand
Nicaragua
Niger
Nigeria
Niue
Norfolk Island
Northern Mariana Islands
Norway
Oman
Pakistan
Palau
Palestinian Territory, Occupied
Panama
Papua New Guinea
Paraguay
Peru
Philippines
Pitcairn
Poland
Portugal
Puerto Rico
Qatar
Réunion
Romania
Russian Federation
Rwanda
Saint Barthélemy
Saint Helena, Ascension and Tristan da Cunha
Saint Kitts and Nevis
Saint Lucia
Saint Martin (French part)
Saint Pierre and Miquelon
Saint Vincent and the Grenadines
Samoa
San Marino
Sao Tome and Principe
Saudi Arabia
Senegal
Serbia
Seychelles
Sierra Leone
Singapore
Sint Maarten (Dutch part)
Slovakia
Slovenia
Solomon Islands
Somalia
South Africa
South Georgia and the South Sandwich Islands
South Sudan
Spain
Sri Lanka
Sudan
Suriname
Svalbard and Jan Mayen
Swaziland
Sweden
Switzerland
Syrian Arab Republic
Taiwan, Province of China
Tajikistan
Tanzania, United Republic of
Thailand
Timor-Leste
Togo
Tokelau
Tonga
Trinidad and Tobago
Tunisia
Turkey
Turkmenistan
Turks and Caicos Islands
Tuvalu
Uganda
Ukraine
United Arab Emirates
United Kingdom
United States
United States Minor Outlying Islands
Uruguay
Uzbekistan
Vanuatu
Venezuela, Bolivarian Republic of
Viet Nam
Virgin Islands, British
Virgin Islands, U.S.
Wallis and Futuna
Western Sahara
Yemen
Zambia
Zimbabwe
HTML Select (HTML 선택)
Javascript이나 ui dropdown을 사용할 수 없다면, 폼은 select 요소에 대한 기본 스타일링을 제공할 수도 있어요.
Gender (성별)
Male (남성)
Female (여성)
Calendar (캘린더)
폼에는 캘린더를 포함할 수 있어요.
$('.ui.calendar').calendar({
type: 'date'
});
Date (날짜)
Message (메시지)
폼에는 메시지를 포함할 수 있어요.
폼 안에 있는 `info`, `error`, `success`, `warning` 메시지 블록은 기본적으로 숨겨져 있어요. 폼 안의 메시지를 항상 보이게 하고 싶다면, 메시지에 `visible` 클래스를 추가하면 돼요.
We had some issues (문제가 있었어요)
- Please enter your first name (이름을 입력해 주세요)
- Please enter your last name (성을 입력해 주세요)
Form States (폼 상태)
Loading (로딩)
폼이 로딩 상태에 있으면 로딩 표시기를 자동으로 보여줘요.
`elastic` 로딩 스타일은 폼이 배경을 어둡게 하기 위해 `:before` 의사 클래스를 사용하기 때문에 현재 지원되지 않아요.
E-mail (이메일)
Submit (제출)
E-mail (이메일)
Submit
Success (성공)
폼이 성공 상태에 있으면 성공 메시지 블록을 자동으로 보여줘요.
E-mail (이메일)
Form Completed (폼 완료)
You're all signed up for the newsletter. (뉴스레터에 모두 가입됐어요.)
Submit (제출)
Error (오류)
폼이 오류 상태에 있으면 오류 메시지 블록을 자동으로 보여줘요.
E-mail (이메일)
Action Forbidden (동작 금지)
You can only sign up for an account once with a given e-mail address. (하나의 이메일 주소로 계정을 한 번만 가입할 수 있어요.)
Submit (제출)
Warning (경고)
폼이 경고 상태에 있으면 경고 메시지 블록을 자동으로 보여줘요.
E-mail (이메일)
Could you check something! (한 가지 확인해 주세요!)
- That e-mail has been subscribed, but you have not yet clicked the verification link in your e-mail. (그 이메일은 구독됐지만, 아직 이메일의 인증 링크를 클릭하지 않았어요.)
Submit (제출)
Info (정보)
폼이 정보 상태에 있으면 정보 메시지 블록을 자동으로 보여줘요.
New Password (새 비밀번호)
Requirements (요구 사항)
- Password must contain at least 8 characters (비밀번호는 최소 8자 이상이어야 해요)
Submit (제출)
Field States (필드 상태)
Field Error (필드 오류)
개별 필드는 오류 상태를 표시할 수 있어요.
First Name (이름)
Last Name (성)
Gender (성별)
Select (선택)
Male (남성)
Female (여성)
I agree to the Terms and Conditions (이용약관에 동의합니다)
Field Warning (필드 경고)
개별 필드는 경고 상태를 표시할 수 있어요.
First Name (이름)
Last Name (성)
Gender (성별)
Select (선택)
Male (남성)
Female (여성)
I agree to the Terms and Conditions (이용약관에 동의합니다)
Field Success (필드 성공)
개별 필드는 성공 상태를 표시할 수 있어요.
Username (사용자 이름)
Last Name (성)
Gender (성별)
Select (선택)
Male (남성)
Female (여성)
I agree to the Terms and Conditions (이용약관에 동의합니다)
Field Info (필드 정보)
개별 필드는 정보 상태를 표시할 수 있어요.
First Name (이름)
Last Name (성)
Gender (성별)
Select (선택)
Male (남성)
Female (여성)
I agree to the Terms and Conditions (이용약관에 동의합니다)
Disabled Field (비활성 필드)
개별 필드는 비활성화될 수 있어요.
First Name (이름)
Last Name (성)
Read-Only Field (읽기 전용 필드)
개별 필드는 읽기 전용이 될 수 있어요.
First Name (이름)
Last Name (성)
Form Variations (폼 변형)
Size (크기)
폼은 크기를 다양하게 바꿀 수 있어요.
First Name (이름)
Last Name (성)
Submit (제출)
First Name (이름)
Last Name (성)
Submit (제출)
First Name (이름)
Last Name (성)
Submit (제출)
First Name (이름)
Last Name (성)
Submit (제출)
First Name (이름)
Last Name (성)
Submit (제출)
First Name (이름)
Last Name (성)
Submit (제출)
First Name (이름)
Last Name (성)
Submit (제출)
Equal Width Form (동일 너비 폼)
폼은 필드를 자동으로 동일한 너비로 나눌 수 있어요.
Username (사용자 이름)
Password (비밀번호)
First name (이름)
Middle name (중간 이름)
Last name (성)
Inverted (반전)
어두운 배경 위의 폼은 색상 구성을 반전해야 할 수 있어요.
First Name (이름)
Last Name (성)
I agree to the terms and conditions (이용약관에 동의합니다)
Submit (제출)
Field Variations (필드 변형)
Inline Field (인라인 필드)
필드는 라벨을 위가 아닌 옆에 둘 수 있어요.
Last name (성)
Width (너비)
필드는 그리드 컬럼 수로 너비를 지정할 수 있어요.
First name (이름)
Middle (중간)
Last name (성)
Required (필수)
필드는 입력이 필수임을 보여줄 수 있어요.
Last name (성)
I agree to the terms and conditions (이용약관에 동의합니다)
Transparent Textarea (투명 텍스트 영역)
textarea는 투명하게 보일 수 있어요.
Description (설명)
Group Variations (그룹 변형)
Evenly Divided (균등 분할)
필드의 너비를 균등하게 나눌 수 있어요.
First name (이름)
Middle name (중간 이름)
Last name (성)
Grouped Fields (그룹화된 필드)
필드는 관련 선택지를 보여줄 수 있어요.
Apples (사과)
Oranges (오렌지)
Pears (배)
Grapefruit (자몽)
Equal Width Fields (동일 너비 필드)
필드들은 자동으로 동일한 너비로 나눌 수 있어요.
Username (사용자 이름)
Password (비밀번호)
First name (이름)
Middle name (중간 이름)
Last name (성)
Inline Fields (인라인 필드)
여러 필드가 한 줄에 인라인으로 놓일 수 있어요.
Phone Number (전화번호)
What's your favorite fruit? (좋아하는 과일은 무엇인가요?)
Apples (사과)
Oranges (오렌지)
Pears (배)
Grapefruit (자몽)
더 알아보기 (Learn more)
Form 컬렉션은 여러 입력 타입을 시맨틱하게 조합해 폼을 만들 수 있게 해줘요. 실제 기능(검증, 캘린더 값 처리 등)은 Form 동작(behavior) 모듈과 함께 사용할 때 완성되니, 함께 익혀 두면 좋아요.