HTML Form Related Tag List

폼 요소의 종류

폼 요소들은 <form>태그 없이도 사용할 수 있는데, 이런 경우에는 주로 웹서버에 전송하지 않고 자바 스크립트 코드에서 사용자의 입력을 받는 목적으로 사용한다.

<input type="text"> // 한 줄 텍스트 입력 창

<input type="password">// 암호 입력을 위한 한 줄 텍스트 입력 창

<input type="button"> // 단순 버튼

<input type="submit"> // 웹 서버로 폼 데이터를 전송시키는 버튼

<input type="reset"> // 입력된 폼 데이터를 초기화시키는 버튼

<input type="image"> // 이미지 버튼

<input type="checkbox | radio"> // 체크 박스와 라디오 버튼

<input type="month | week | date | time | datetime-local"> //년, 월, 일, 시간 등의 시간 정보 입력 창

<input type="number | range"> // 스핀 버튼과 슬라이드바로 편리한 숫자 입력 창

<input type="color"> // 색 입력을 쉽게 하는 컬러 다이얼로그

<input type="email | url | tel | search"> // 이메일, url, 전화번호, 검색키워드 등 형식검사 기능을 가진 텍스트 입력 창

<input type="file"> // 로컬 컴퓨터의 파일을 선택하는 폼 요소

<button type="button | reset | submit"> // 단순 버튼, reset, submit 버튼

<select> // 드롭다운 리스트를 가진 콤보박스

<textarea> // 여러 줄의 텍스트 입력 창

 

- 폼 요소들의 그루핑<fieldset>

<fieldset>태그로 폼 요소들을 그룹으로 묶을 수 있으며, 그룹의 제목은 <legend>태그로 표현됨.

<form>

       <fieldset>

<legend>회원정보</legend>

이메일 : <input type="email"><br>

홈페이지 : <input type="url"><br>

전화번호 : <input type="tel"> <br>

       </fieldset>

       <small>질문: Tel. 010-111-1111</small>

</form>

 

 

 

 

 

텍스트 입력

①text | password

<input  type="text | password"  name="요소 이름"

maxlength="문자 개수" // 입력할 수 있는 문자의 최대 개수

size="문자 개수" // 입력 창의 크기, 단위는 문자 개수.

value="초기에 출력되는 문자열">

②textarea

<textarea  cols="열 개수" // 텍스트 입력 창의 크기로 가로세로 문자 수

    rows="행 개수" // 텍스트 입력 창의 크기로 가로세로 문자 수

    name="요소 이름"

    wrap="OFF | HARD | SOFT" // 자동 줄바꿈 처리 지정>

화면에 출력할 초기 텍스트입니다. 없으면 빈 공간만 출력됩니다.

</textarea>

 

③데이터 목록을 가진 텍스트 입력 창

<form>

나라 : <input type="text" list="countries"><br>

<datalist id="countries">

<option value="산">

<option value="바다">

<option value="도시">

</datalist>

</form>

 

 

 

 

 

형식을 가진 텍스트 입력

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

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

<input type="submit" value="전송">

②URL

"http://www.naver.com"처럼 W3C규정에 맞도록 입력되어야 하며, 웹서버로 전송될 때 유효성이 자동으로 검사된다.

<input type="url" placeholder="http://">

③전화번호 입력

전화번호 형식이 워낙 다양하므로 W3C는 자유롭게 입력하도록 허용하고 있어 이 태그는 유효성 검사를 하지 않는다.

<input type="tel" placeholder="010-1234-5678">

④검색어 입력

<input type="search" placeholder="검색어">

⑤예시

<form>

       이메일: <input type="email" placeholder="id@host"><br>

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

       전화번호: <input type="tel" placeholder="010-1234-5678">

                     <input type="submit" value="확인"><br><br>

<hr>

       검색어:  <input type="search" placeholder="검색어">

                    <input type="button" value="검색">

</form>

 

 

 

 

 

텍스트/이미지 버튼 만들기

①단순 버튼

<input type="button" value="로그인">

<button type="button">로그인</button>

 

②제출(submit) 버튼

<input type="submit" value="전송">

<button type="submit">전송</button>

③리셋(reset) 버튼

<input type="reset" value="리셋">

<button type="reset">리셋</button>

④이미지 버튼#1

<input type="image" src="button.png" alt="이미지 버튼">

⑤이미지 버튼#2

<button type="button"><img src="button.png" alt="이미지 버튼"></button>

 

 

 

 

 

선택형 입력

①체크 박스

<input type="checkbox"

          name="요소 이름"

          value="요소 값" // 폼 요소가 선택된 상태일 때, 웹서버에 전송되는 값

          checked> // 이 속성이 있으면 초기 선택 상태로 출력

<form>

짜장면<input type="checkbox" value="1">

짬뽕<input type="checkbox" value="2" checked>

탕수육<input type="checkbox" value="3">

</form>

 

②라디오 버튼

<input type="radio"

          name="요소 이름"

          value="요소 값" // 폼 요소가 선택된 상태일 때, 웹서버에 전송되는 값

          checked> // 이 속성이 있으면 초기 선택 상태로 출력

<form>

<input type="radio" name="china" value="1"> // 같은 name을 가진 라디오 버튼 중 하나만 선택 가능

짜장면<img src="media/jajang.png"><br>

<input type="radio" name="china" value="2" checked>

짬뽕<img src="media/jjambbong.png"><br>

<input type="radio" name="china" value="3">

탕수육<img src="media/tangsuyuk.png"><br>

</form>

 

③콤보박스 만들기

<select name="요소이름

.          size="개수" // 콤보박스 창 크기(보일 수 있는 최대 항목의 개수). 디폴트는 1

.          multiple> // 이 속성이 있으면 다수 항목 선택 가능

여러개의 <option></option> 태그로 선택 항목 만들기

<option value="옵션 값" // 이 항목이 선택되었을 때 웹 서버에 전송되는 값

            selected> // 이 속성이 있으면 초기에 선택 상태로 출력

</option>

<form>

<select name="china">

<option value="1">짜장면</option>

<option value="2" selected>짬뽕</option>

<option value="3">탕수육</option>

</select>

</form>

※ <datalist>와 <select>의 차이점

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

 

 

 

 

 

라벨<label>로 폼 요소의 캡션 만들기

라벨을 이용하면 캡션과 폼 요소를 한 단위로 묶어 문서를 훨씬 명료하게 표현할 수 있고 한 단위로 다룰 수 있게 된다.
①폼 요소 둘러싸기

<label>

사용자 ID : <input type="text">

</label>

②<label>로 캡션 지정하고, for속성으로 캡션과 폼 요소 연결

<label for="loginID">

사용자 ID:

</label>

<input type="text" id="loginID">

③예제

<form>

      <label>

<input type="radio" name="china" value="1">

짜장면 <img src="media/jajang.png">

      </label><br>

      <label>

<input type="radio" name="china" value="2">

짬뽕 <img src="media/jjambbong.png">

      </label><br>

      <label>

<input type="radio" name="china" value="3">

탕수육 <img src="media/tangsuyuk.png">

      </label>

</form>

 

 

 

 

 

기타 입력

①색 입력

<input type="color" value="#00ff00">

value // 초기색을 지정. #00ff00은 초록색

- 자바스크립트 코드를 이용하여, 사용자가 컬러 다이얼로그에서 선택한 색으로 브라우저의 글자색 변경하기

<form>

      색 선택 <input type="color" value-"#00ff00"

    onchange="document.body.style.color=this.value">

</form>

 

②시간 정보 입력

<input type="month" value="2022-03"> // 달

<input type="week" value="2022-W09"> // 주

<input type="date" value="2022-03-01"> // 날짜

<input type="datetime-local" value="2022-03-01T21:30:10.32"> // 로컬 날짜시간

<input type="time" value="21:30"> // 시간

 

③편리한 숫자 입력
- 스핀버튼으로 정교한 값 입력

<input type="number">

- 슬라이드바로 대략적인 값 입력

<input type="range">

- 예제 

<form>

       지속시간 (0.0~10.0시간)

       <input type="number" min="0.0" max="10.0"

                 step="0.5"><br><br>

       온도 설정 :10&deg;

       <input type="range" min="10" max="30"

                 list="temperatures">30&deg;

       <datalist id="temperatures">

<option value="12" label="Low">

<option value="20" label="Medium">

<option value="28" label="High">

       </datalist>

</form>