<input> : Checkbox Type
HTML에서 input 성분을 사용할 때, type="checkbox" 속성은 하나의 체크박스 아이템을 불러온다.
같은 주제로 연결된 체크박스 그룹을 만들기 위해서는, 각 input 성분 모두 같은 name 속성을 사용해야 한다.
이를 통해 하나의 주제에 대해 여러 개의 체크박스를 선택할 수 있다.
<input type="checkbox" name="breakfast" value="bacon">베이컨 🥓<br>
<input type="checkbox" name="breakfast" value="eggs">달걀 🍳<br>
<input type="checkbox" name="breakfast" value="pancakes">펜케이크 🥞<br>
위 코드의 각 속성에 대해 자세히 설명하면 다음과 같다.
| type="checkbox" | 입력 요소의 종류를 체크박스로 지정. 사용자가 체크하거나 해제할 수 있는 상자를 생성 |
| name="breakfast" | 이 체크박스들이 같은 그룹(이름)을 공유함. → 폼(form) 전송 시 같은 name으로 여러 value가 함께 전달될 수 있음 |
| value="bacon" | 체크되었을 때 서버로 전송될 값. 예: 사용자가 베이컨을 선택하면 breakfast=bacon으로 전송됨 |
위 코드의 실행 결과는 다음과 같다.
☐ 베이컨 🥓
☐ 달걀 🍳
☐ 펜케이크 🥞
<textarea> Element
textarea 성분은 여러 줄의 input(e.g.a comment section)을 위한 텍스트 박스를 만들 때 사용된다.
이 성분은 각 성분의 높이와 폭을 결정하는 rows와 cols 속성을 사용한다.
브라우저에서 렌더링할 때, 텍스트 영역 필드는 사용자가 크기를 늘리거나 줄일 수 있지만, 초기 크기는 행과 열 속성에 따라 결정된다.
input 성분과 달리, <textarea> 성분은 opening tag와 closing tag를 둘다 가진다. <textarea>의 value는 이 태그 사이의 내용이다. (<p> 성분과 매우 유사)
아래 코드는 사이즈 10×30이며 name으로 "comment'를 가진 <textarea>를 나타낸다.
<textarea rows="10" cols="30" name="comment"></textarea>
<form> Element
HTML의 <form> 성분은 외부 소스로 정보를 보내거나 모으기 위해 사용된다.
<form>은 다양한 imput 성분들을 포함할 수 있다. 사용자가 폼을 제출하면 이러한 입력 요소의 정보가 양식의 action 속성에 지정된 소스로 전달된다.
<form method="post" action="http://server1">
Enter your name:
<input type="text" name="fname">
<br/>
Enter your age:
<input type="text" name="age">
<br/>
<input type="submit" value="Submit">
</form>
<input>: Number Type
HTML의 input 성분은 type으로 number를 가질 수 있다. 이러한 입력 필드를 사용하면 사용자는 필드 안에 숫자와 몇 가지 특수 문자만 입력할 수 있다.
아래 코드는 "balane"라는 name과 number를 type으로 가진 input을 나타낸다.
입력 필드가 폼의 일부인 경우, 폼은 제출 후 'name : value' 형식의 키-값 쌍을 받게 된다.
<input type="number" name="balance" />
<input> Element
HTML의 <input> 성분은 텍스트 필드, 체크박스, 버튼 등을 포함하는 웹페이지에 다양한 입력 필드를 불러오기 위해 사용된다.
<input> 성분에는 페이지에 렌더링되는 방식을 결정하는 type 속성이 있다.
아래는 웹페이지에 텍스트 입력 필드와 체크박스 입력 필드를 만들 수 있는 코드이다.
<label for="fname">당신의 이름을 입력하세요(First nmae):</label>
<input type="text" name="fname" id="fname"><br>
<input type="checkbox" name="vehicle" value="Bike"> 나는 자전거를 가지고 있다.
위 코드의 실행결과는 다음과 같다.
당신의 이름을 입력하세요(First name): ______
□ 나는 자전거를 가지고 있다.
<input>: Range Type
HTML 입력 요소에 type="range" 성분을 사용하면 슬라이더를 만들 수 있다.
범위 슬라이더는 최소값과 최대값 사이의 선택자 역할을 한다. 이 값들은 각각 min 및 max 속성을 사용하여 설정한다. step 속성을 사용하여 슬라이더를 여러 단계 또는 고정된 값만큼 증가하도록 조정할 수 있다.
범위 슬라이더는 두 값 사이를 조절하는 시각적 위젯 역할을 하며, 상대적인 위치는 중요하지만 정확한 값은 그다지 중요하지 않다. 예를 들어 애플리케이션의 볼륨 레벨을 조절하는 것이 있다.
<input type="range" name="movie-rating" min="0" max="10" step="0.1">
<select> Element
HTML의 <select> 성분은 드롭다운 리스트를 만들기 위해 사용된다.
드롭다운 목록의 선택 항목 목록은 하나 이상의 <option> 요소를 사용하여 만들 수 있다. 기본적으로 <option>은 한 번에 하나만 선택할 수 있다.
선택된 <select>의 name의 값과 <option>의 value 속성은 폼이 제출될 때 키-값 쌍으로 보내진다.
<select name="rental-option">
<option value="small">작음</option>
<option value="family">가족 세단</option>
<option value="lux">럭셔리</option>
</select>
Submitting a Form
폼에서 정보를 수집한 후에는 action 및 method 속성을 사용하여 해당 정보를 다른 곳으로 전송할 수 있다.
action 속성은 폼에 정보를 전송하도록 지시한다. URL에는 정보를 받는 수신자를 지정한다. method 속성은 폼에 전송된 정보를 어떻게 처리할지 지정한다. method 속성에는 수행할 작업을 지정하는 HTTP 동사가 할당된다.
<form action="/index3.html" method="PUT"></form>
<input>: Text Type
HTML의 <input> 성분은 type="text" 속성을 통해 텍스트를 입력할 수 있다. 이렇게 하면 사용자가 텍스트를 입력할 수 있는 단일 행 입력 필드가 렌더링된다.
<input>의 name의 값과 value 속성은 폼이 제출될 때 키-값 쌍으로 전송된다.
<input type="text" name="username">
<datalist> Element
HTML 입력을 사용할 때, <input>과 <datalist>를 연결하면 기본적인 검색/자동완성 기능을 구현할 수 있다. <input>과 <datalist>를 연결하려면 <input>의 목록 값이 <datalist>의 ID 값과 일치해야 한다. datalist 요소는 <option> 목록을 저장하는 데 사용된다.
사용자가 입력 필드를 클릭하면 데이터 목록이 입력 필드에 드롭다운으로 표시된다.
사용자가 입력을 시작하면 목록이 업데이트되어 입력 필드에 입력한 내용과 가장 일치하는 요소가 표시된다. 실제 목록 아이템들은 데이터 목록 안에 포함된 여러 option 성분으로 정해진다.
datalist는 사용자에게 미리 정해진 옵션 리스트를 제공할 때 사용하면 이상적이지만, 사용자에게 주어진 옵션 외의 대체 내용을 작성할 수 있도록 허용하기도 한다.
<input list="ide">
<datalist id="ide">
<option value="Visual Studio Code" />
<option value="Atom" />
<option value="Sublime Text" />
</datalist>
<input>: Radio Button Type
HTML <input> 성분에 type="radio" 속성을 지정하여 단일 라디오 버튼을 렌더링할 수 있다. 관련 주제의 여러 라디오 버튼에는 동일한 name 속성 값이 지정된다. 라디오 버튼 그룹에서는 하나의 옵션만 선택할 수 있다.
이 성분의 선택/체크된 <input>의 name 및 value 속성 값은 양식이 제출될 때 키-값 쌍으로 전송된다.
<input name="delivery_option" type="radio" value="pickup" />
<input name="delivery_option" type="radio" value="delivery" />
Submittable Input
HTML <input> 요소에 type="submit" 속성을 추가하여 type 속성을 submit으로 설정할 수 있다. 이 속성을 추가하면 제출 버튼이 렌더링되고, 기본적으로 <form>을 제출하고 해당 동작을 실행한다.
제출 버튼의 텍스트는 기본적으로 'Submit'으로 설정되지만, value 속성을 수정하여 변경할 수 있다.
<input> name Attribute
폼에서 데이터를 전송하려면 데이터를 키-값 쌍으로 표현할 수 있어야 한다. 이는 input 요소의 name 속성을 설정하여 구현할 수 있다. name 속성은 키가 되고, input 요소의 value 속성은 폼에서 해당 키에 해당하는 값으로 전송된다.
폼을 전송하는 측면에서, name 속성은 ID 속성과 동일하지 않다는 점을 기억해야 한다. input 성분의 ID와 name 속성은 동일할 수 있지만, name 속성이 지정된 경우에만 value 속성이 전송된다.
아래의 코드를 실행하면, 첫 번째 input 성분은 폼에서 전송되지만, 두 번째 input 성분은 전송되지 않는다.
<input name="username" id="username" />
<input id="address" />
<label> Element
HTML <label> 성분은 <input>의 id 속성과 <label>의 for 속성 값이 일치하는지 확인하여 특정 <input>을 식별한다. 기본적으로 <label>을 클릭하면 관련 <input> 필드로 포커스가 이동한다.
아래 코드는 "비밀번호:"라는 레이블 텍스트 옆에 텍스트 입력 필드를 생성한다. 페이지에서 "Password:"를 클릭하면 관련 <input> 필드로 포커스가 이동한다.
<label for="password ">비밀번호:</label>
<input type="text" id="password" name="password">
<input> Password Type
HTML <input> 성분은 type="password" 속성을 가질 수 있다. 이 속성은 사용자가 필드 안에 검열된 텍스트를 입력할 수 있도록 단일 행 입력 필드를 렌더링한다. 이 속성은 민감한 정보를 입력하는 데 사용된다.
이 <input> 요소의 name 과 value 속성(검열된 버전이 아닌 실제 값) 값은 양식 제출 시 키-값 쌍으로 전송된다.
아래 코드는 기본 로그인 양식의 필드인 사용자 이름과 비밀번호 필드의 예를 보여준다.
<input type="text" name="username" />
<input type="password" name="password" />
<required> Attribute
HTML에서 입력 필드에는 required라는 속성이 있는데, 이 속성은 해당 필드에 값을 반드시 입력해야됨을 의미한다. 만일 이 속성이 부여된 input 필드를 입력하지않으면, 폼이 제출되지 않는다.
아래 코드는 필수 입력 필드를 보여준다. 이 속성은 "required="true" 또는 간단히 "required"로 작성할 수 있다.
<input type="password" name="password" required >
max Attribute
type="number"인 HTML <input> 태그에는 입력 필드의 최대값을 지정하는 max라는 속성이 있다.
아래 코드는 최대값이 20으로 설정된 숫자 입력 필드를 보여준다. 20보다 큰 값을 입력하면 입력 필드에 오류가 있다고 표시된다.
<input type="number" max="20">
min Attribute
HTML에서, 숫자 유형의 입력 필드에는 min이라는 속성이 있는데, 이 속성은 필드에 입력할 수 있는 최소값을 지정한다.
아래 코드는 최소값 1을 받는 숫자 입력 필드를 보여준다.
<input type="number" name="rating" min="1" max="10">
maxlength Attiribute
HTML에서 텍스트 유형의 입력 필드에는 maxlength라는 속성이 있는데, 이 속성은 필드에 입력할 수 있는 최대 문자 수를 지정한다.
아래 코드는 최대 140자의 텍스트를 입력받는 입력 텍스트 필드를 보여준다.
<input type="text" name="tweet" maxlength="140">
minlength Attribute
HTML에서 텍스트 유형의 입력 필드에는 최소 길이 유효성 검사를 지원하는 속성이 있다. 입력 텍스트의 최소 길이를 확인하려면 minlength 속성에 문자 수를 추가하면 된다.
아래 코드는 최소 길이가 6인 텍스트 필드의 예를 보여준다.
<input type="text" name="username" minlength="6" />
pattern Attribute
텍스트 입력 요소에서 pattern 속성은 폼이 제출될 때 <input>의 값과 일치(or 유효성 검사)하는지 확인하기 위해 정규 표현식을 사용한다.
<form action="/action_page.php">
국가 코드:
<input type="text" name="country_code"
pattern="[A-Za-z]{3}"
title="3자리 국가 코드">
<input type="submit">
</form>
+) 자주 쓰이는 정규 표현식 예시
| 목적 | 정규표현식 | 설명 |
| 이메일 형식 | ^[\w.-]+@[\w.-]+\.\w{2,}$ | 일반적인 이메일 형식 |
| 한글만 허용 | ^[가-힣]+$ | 띄어쓰기 없이 순수 한글만 |
| 한글 + 공백 | ^[가-힣\s]+$ | 한글과 공백 허용 |
| 영문만 허용 | ^[A-Za-z]+$ | 영어만 (대소문자 모두 허용) |
| 영문 + 숫자 | ^[A-Za-z0-9]+$ | 영어 + 숫자 조합 |
| 숫자만 허용 | ^\d+$ | 숫자만 입력 |
| 최소 10자 이상 | ^.{10,}$ | 아무 문자나 10자 이상 |
| 최대 100자 이하 | ^.{0,100}$ | 아무 문자나 100자 이하 |
| 특정 단어 포함 금지 | `^(?!.*(욕설 | 비속어)).*$` |
| 공백 없이 입력 | ^\S+$ | 공백 포함 불가 |
| 문장 끝이 마침표 | ^.*\.$ | 마지막 문자가 마침표(점) |
HTML Form Validators
HTML 양식을 사용하면 입력 필드에 다양한 유형의 유효성 검사를 지정하여 데이터가 제출되기 전에 올바르게 입력되었는지 확인할 수 있습다.
HTML은 최소값, 최소/최대 길이 등 다양한 유효성 검사기를 지원한다. 이러한 유효성 검사기는 입력 필드의 속성으로 지정된다.
참고자료
https://www.codecademy.com/learn/learn-html/modules/learn-html-forms/cheatsheet