HTML5+CSS3 - 폼 관련 태그

폼이란 텍스트상자, 버튼, 목록 등 사용자가 웹 사이트로 어떤 정보를 보낼 수 있는 요소들이다.

검색창이나, 아이디창, 로그인버튼 등등 모두 폼이다.

웹 문서 모든 곳에서 각 요소를 구분하기 위해 글로벌속성으로 id를 사용한다.

id는 영문,숫자,언더바,하이픈을 사용할 수 있는데, 숫자로 시작하지 않도록 한다.

<form>태그 - 폼 만들기

<form [속성="속성값"]> 여러 폼 요소 </form>

폼을 만드는 기본 태그. 이 태그 사이에 여러 폼 관련 요소를 추가한다.

속성

 - method : 폼을 전송하는 방식을 선택. post, get 중 선택. get은 256~4096 바이트로 제한. post는 입력 길이 제한 없음. 주로 post 사용.

 - name : 폼을 식별하기 위한 이름.

 - action : 폼을 전송할 서버 쪽의 스크립트 파일을 지정. onsubmit 이벤트로 스크립트 처리도 가능.

 - target : action에서 지정한 스크립트 파일을 현재창이 아닌 다른 위치에 열도록 지정.

여러 폼 요소를 나열할 때는 <ul>, <li> 태그를사용하여 목록처럼 나열한다.

submit type의 <input> 태그를 실행하면 웹 서버의 스크립트 파일로 전송되고 처리된다. 스크립트파일은 action 속성에서 지정한 파일. (ex. test.php)

<fieldset>, <legend>태그 - 폼 요소 그룹으로 묶기

<fieldset [속성="속성값"]> ... </fieldset>

폼 요소들을 보기 쉽게 그룹으로 묶어주는 태그.

하나의 폼 안에서 여러 구역을 나눠 표시할 때, 이 태그를 사용하면 하나의 영역으로 묶고 외곽선을 그려준다.

속성

 - disabled : 자식 폼 요소들을 사용할 수 없게 만든다.

 - form : 속해 있는 form의 이름을 표시할 수 있다.

 - name : 다른 태그와 구분하기 위한 이름.

<fieldset> 태그로 묶은 외곽선에 제목을 붙일 때는 <legend> 태그를 사용.

<legend> fieldset 제목 </legend>

<label>태그 - 폼 요소에 캡션 붙이기

<label [속성="속성값"]> 캡션 <input ...> </label>

폼 요소에 캡션을 붙이기 위한 태그. 사용했을 때 겉보기엔 티가 나지 않는다.

폼 요소와 설명을 묶는 용도로 사용. 또한, 체크박스나 라디오버튼시 이 태그로 묶어주면 글자부분을 눌러도 버튼이 체크된다.

for 속성을 사용하는 아래의 방식으로도 사용이 가능한데, 이렇게 라벨 속성을 사용하면 라벨부분만 CSS 스타일을 적용시킬 수 있다.

<label [속성="속성값"] for="이름"> 캡션 <input ...> </label>

<input ... id="이름">

<input>태그 - 사용자가 정보를 입력하는 태그

<input type="유형" [속성="속성값"]>

사용자가 입력하는 부분은 거의 <input> 태그를 이용하여 처리한다.

type 속성에 따라 어떤 모양이 될지 결정된다.

type 속성에 사용되는 값들은 아래와 같다. 

hidden - 숨어 있는 필드

<input type="hidden" name="이름" value="서버로 넘길 값">

화면상에 보이지 않지만 서버로 전송된다.

text - 텍스트 필드 만들기

<input type="text" [속성="속성값"]>

한 줄짜리 일반 텍스트를 입력하는 필드.

속성

 - name : 텍스트 필드를 구별하는 이름.

 - size : 텍스트 필드의 길이를 지정.

 - value : 텍스트 필드에 표시될 내용.

 - maxlength : 텍스트 필드에 입력할 수 있는 최대 문자 개수.

password - 비밀번호 입력란 만들기

<input type="password" [속성="속성값"]>

텍스트 필드와 같지만, '*'이나 '●'로 표시된다.

value 속성만 없고 텍스트 필드와 속성이 동일하다.

search - 검색 상자 만들기

<input type="search" [속성="속성값"]>

텍스트 필드와 같아 보이지만, 상자 우측에 "X"표가 표시된다. 쓴 내용을 지우는 기능.

url - URL 입력란 만들기

<input type="url" [속성="속성값"]>

텍스트 필드와 같지만, 모바일 기기에서 키보드 배열이 달라진다. (/, .com 등등)

email - 메일 주소 입력란 만들기

<input type="email" [속성="속성값"]>

텍스트 필드와 같지만, @ 문자가 들어있는지 자동으로 체크해준다. 모바일 기기에서 키보드 배열이 달라진다.

tel - 전화번호 입력란 만들기

<input type="tel" [속성="속성값"]>

텍스트 필드와 같지만 전화번호를 입력한것이라고 알기 위함. 모바일 기기에서 키보드 배열이 달라진다.

number, range - 숫자 입력하기

<input type="number" [속성="속성값"]>

<input type="range" [속성="속성값"]>

number 타입은 스핀박스가 나타나고, range 타입은 슬라이드 막대가 나타난다.

속성

 - min : 입력할 수 있는 최소값. range일 때는 0.

 - max : 입력할 수 있는 최대값. range일 때는 100.

 - step : 숫자간격을 지정. 기본값 1. 생략 가능.

 - value : 초기값.

지원하지 않는 브라우저에서는 일반 텍스트상자로 표시.

radio - 라디오 버튼 넣기

<input type="radio" [속성="속성값"]>

여러 개의 항목 중 한 가지만 선택하도록 할 때 사용하는 버튼.

속성

 - name : 라디오 버튼들을 구분하기 위한 이름. 같은 그룹은 이를 똑같이 해야한다.

 - value : 서버로 넘길 값을 지정. 영문이나 숫자. 필수 속성.

 - checked : 초기에 선택된 상태로 표시.

checkbox - 체크박스 넣기

<input type="checkbox" [속성="속성값"]>

여러 개의 항목 중 여러 개를 선택할 수 있는 박스.

속성은 라디오버튼과 같으며, name은 일치시키지 않아도 된다.

color - 색상 선택 상자 표시하기

<input type="color" [속성="속성값"]>

색상표를 선택할 수 있게 해주는 요소. 일부 브라우저 지원 안함.

RGB 형식 사용. #FF0000 : 빨간색

datetime, datetime-local - 날짜와 시간 표시하기

<input type="datetime" [속성="속성값"]>

<input type="datetime-local" [속성="속성값"]>

날짜와 시간을 함께 표시할 수 있다.

datetime은 UTC를 기준으로 한 날짜와 시간. datetime-local은 지역의 날짜와 시간.

date, month, week - 다양한 날짜 표기하기

날짜 선택 달력이 생성.

date: 년,월,일 (yyyy-mm-dd)

month: 년,월 (yyyy-mm)

week: 년,주 (yyyy-W24)

time - 시간 지정하기

시간 선택 스핀 박스 생성.

file - 파일 첨부하기

<input type="file" [속성="속성값"]>

파일선택, 찾아보기, 선택 등의 이름으로 버튼이 생서되며, 버튼을 클릭하면 파일 선택 다이얼로그가 발생되고, 선택하면 파일이 첨부된다.

submit - 서버 전송 버튼 넣기

<input type="submit" [value="버튼내용"] [속성="속성값"]>

폼에 입력한 정보를 서버로 전송하는 버튼.

reset - 리셋 버튼 넣기

<input type="reset" [value="버튼내용"] [속성="속성값"]>

입력된 정보들을 모두 리셋하여 지울수 있다.

image - 이미지 버튼 넣기

<input type="image" src="경로" alt="대체 텍스트" [속성="속성값"]>

button - 버튼 넣기

<input type="button" [value="버튼내용"] [속성="속성값"]>

버튼을 추가한다. submit, reset 처럼 자체 기능을 갖지 않아 스크립트 함수 등을 연결해서 사용.

<input>태그의 속성

readonly - 읽기 전용 필드 만들기

읽기 전용으로 변경. 보이기만하고, 입력할 수 없다.

boolean 값 사용. (true false)

placeholder - 힌트 표시하기

필드 안에 적당한 힌트를 회색으로 표시하고 있다가 클릭하면 사라진다.

autofocus - 입력 커서 표시하기

페이지를 불러오자 마자 폼 요소에 마우스 커서가 표시되도록 한다.

네이버 페이지에 들어갔을 때, 검색창에 커서 깜빡이는 것.

autocomplete - 자동 완성 기능 제어하기

웹에서 검색한 내용들 등 한번 입력했던 내용을 저장해두었다가 보여줄 때가 있다.

이 속성을 이용하여, 브라우저 속성에서 자동완성을 사용하든 안하든 상관없이 기능을 제어할 수 있다.

on : 자동완성 기능 켜기

off : 자동완성 기능 끄기

required - 필수 필드 지정하기

폼 요소 중 필수로 요구하는 항목에 사용한다.

필수 필드에 내용이 채워져 있는지 검사하고, 채워져있지 않으면 오류 메시지가 표시되며, 서버로 전송이 불가능하다.

<select>, <optgroup>, <option> 태그 - 드롭다운 목록 만들기

<select 속성="속성값">

  <optgroup label="그룹명">

    <option value="서버로넘길값" [속성="속성값"]> 내용1 </option>

    <option value="서버로넘길값" [속성="속성값"]> 내용2 </option>

    <option value="서버로넘길값" [속성="속성값"]> 내용3 </option>

  </optgroup>

  ...

</select>

클릭하면 아래로 옵션들이 나열되는 드롭다운 목록을 만든다.

<select> 태그에 <option> 태그를 추가하여 사용한다.

옵션 태그의 value 값이 서버로 넘어간다.

<select>태그의 속성

 - size : 보여지는 옵션의 개수를 지정한다.

 - multiple : Ctrl 키를 이용하여 여러개의 값을 선택할 수 있다.

<option>태그의 속성

 - value : 선택했을 때 서버로 넘겨질 값을 지정.

 - selected : 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정.

<optgroup>태그를 사용하여 <option>태그들을 묶으면 옵션들이 그룹처럼 나타난다.

<datalist>, <option> 태그

<input type="text" list="datalist_id">

  <datalist id="datalist_id">

    <option> 내용1 </option>

    <option> 내용1 </option>

    ...

  </datalist>

텍스트필드 아래에 선택할 수 있는 값들을 표시한다.

텍스트 필드 아래에 표시하므로 input 태그와 함께 사용한다.

input 태그의 list 속성의 값을 datalist 태그의 id로 지정해주면 된다.

<option>태그의 속성

 - value : 서버로 넘결질 값을 지정

 - label : 브라우저에 표시할 레이블. 지정하지 않으면 value값이 표시된다.

특정 브라우저에서는 value와 label이 함께 표시되므로 그냥 value만 쓰는게 나을듯.

<textarea>태그 - 여러 줄 입력하는 텍스트 영역 만들기

<textarea [속성="속성값"> 내용 </textarea>

한 줄 이상의 문장을 입력할 때 사용하는 폼.

속성

 - name : 텍스트영역의 이름을 지정.

 - cols : 가로 너비를 문자 단위로 지정.

 - rows : 세로 길이를 줄 단위로 지정.

<button>태그 - 버튼 넣기

<button [type="submit | reset | button"]> 내용 </button>

버튼을 생성할 때 사용한다.

type에 따라 동작이 달라진다.

submit : 폼을 서버로 제출한다. input 태그의 submit 과 동일 기능

reset : 폼에 입력한 내용을 모두 리셋한다. input 태그의 reset과 동일 기능

button : 버튼 형태만 만든다.

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

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

두 내용은 동일한 모양과 기능이다.

하지만 button 태그는 태그 내부에 콘텐츠를 포함할 수 있기 때문에, 이미지도 넣을 수 있고, CSS로 꾸밀 수도 있다.

<output>태그 - 결과 출력하기

<output [속성="속성값"]> 내용 </output>

계산 결과를 표시하기 위한 태그. 볼 때는 텍스트 필드와 다르지 않지만, 계산결과라는걸 브라우저가 알 수 있게 하기 위함.

자바스크립트로 계산 작업 수행.

<progress>태그 - 진행 상태 보여주기

<progress value="값" [max="값"]></progress>

작업의 진행상태를 나타낼 때 사용하는 태그.

일부 브라우저는 지원되지 않는다.

시작은 0. max는 지정하지 않으면 1.0

속성

 - value : 작업의 진행 상태를 나타낸다. 0보다 크거나 같고, max보다 작거나 같아야 한다.

 - max : 최대값을 지정한다. 0보다 커야한다.

자바스크립트를 이용하면 계속 진행시킬 수 있다.

<meter>태그 - 값이 차지하는 크기 표시하기

<meter value="값" [속성="속성값"]></meter>

프로그레스 태그와 비슷하게 생겼지만, 진행상태를 나타내는게 아니라 용량 등이 어느정도 차지하고 있는지를 표시한다.

일부 브라우저는 지원하지 않는다.

속성

 - min, max : 범위의 최소값과 최대값을 지정한다. 지정하지 않으면 0과 1.

 - value : 범위 안에서 차지하는 값.

 - low : "이 정도면 낮다"라는 값을 지정한다.

 - high : "이 정도면 높다"라는 값을 지정한다.

 - optimum : "이 정도면 적당하다"라는 값을 지정한다.

low, high, optimum 범위에 따라 게이지의 색상이 변한다.