[HTML] 웹폼 Webform : 텍스트 입력, 선택형 입력, 형식을 가진 텍스트 입력

1. 텍스트 입력

<input type="text">

<input type="password">

<input type="text|password"
       name="요소 이름"
       maxlength="문자 최대 개수"
       size="입력 창의 크기"
       value="초기 텍스트">

 

<textarea>

여러 줄 텍스트를 입력 받을 때

<textarea cols="열 개수"
          rows="요소 이름"
          wrap="OFF|HARD|SOFT"
          초기 출력될 텍스트>

• cols, rows: 텍스트 입력창의 크기로 가로세로 문자 수 (영어를 기준으로)
• wrap : 자동 줄바꿈 처리 지정

 

<datalist> 

데이터 목록을 가진 텍스트 입력 창. <input> 태그의 list 속성 값과 <datalist>의 id 속성 값을 동일하게 주어 이 둘을 연결한다. 검색어 자동완성 혹은 제이어 기능 구현을 가능하게 해준다.

나라 : <input type="text" list="countries">
<datalist id="countries">
    <option value="요르단">
    <option value="이집트">
    <option value="오만">
</datalist>

 

 

 

3. 선택형 입력

<input type="checkbox">

짜장면 <input type="checkbox" value="1">
짬뽕 <input type="checkbox" value="2" checked>
탕수육 <input type="checkbox" value="3">

• value : 폼 요소가 선택된 상태일 때, 웹서버에 전송되는 값
• checked : 초기에 선택 상태로 출력

 

<input type="radio">

name 속상 값이 같은 라디오 버튼들이 하나의 그룹을 형성하고, 그 중 하나만 선택되는 폼 요소.

<input type="radio" name="china value="1"> 짜장면 
<input type="radio" name="china value="2"> 짬뽕
<input type="radio" name="china value="3"> 탕수육

 

<select>

콤보박스는 드롭다운 목록을 보여주고 그 중 하나를 선택하는 폼 요소. <select> 태그는 콤보박스 전체를 표현하고 <option> 태그는 항목 하나를 표현한다.

<select name="콤보박스 이름" size="콤보박스 항목 개수. 디폴트 1", multiple>
	<option> ... </option>
</select>

• multiple : 다수 항목 선택 가능

 

(예시)

<select name="china">
    <option value="1"> 짜장면 </option>
    <option value="2" selected> 짬뽕 </option>
    <option value="3"> 탕수육 </option>
</select>

 

* <datalist>를 사용하면 옵션 리스트에서 선택하거나 입력창에 직접 입력하여 항목을 선택할 수 있지만, <select>의 경우 옵션 리스트에서만 선택할 수 있다.

 

 

 

8. 형식을 가진 텍스트 입력

email 주소, URL, 전화번호와 같이 텍스트가 특정 형식에 맞게 입력되었는지 검사하는 폼 요소들을 제공한다.

 

<input type="e-mail">

email : <input type="email" placeholder="id@host">

• placeholder : 입력값의 형식을 표시한다. 

 

<input type="url">

홈페이지 : <input type="url" placeholder="http://">

 

<input type="tel">

전화번호 : <input type="tel" placeholder="010-1234-5678" pattern="01[0-9]{1}-[0-9]{3,4}-[0-9]{4}">

• pattern : 원하는 전화번호 형식을 정규 표현식으로 지정하는 자바스크립트 패턴이다. 
• [0-9]{1} : 0부터 9 중에서 1개
• [0-9]{3,4} : 0부터 9 중에서 3개 또는 4개
• [0-9]{4} : 0부터 9 중에서 4개

 

<input type="search">

<input type="search" placeholder="검색어를 입력하세요">