폼은 사용자의 의견이나 정보를 알기 위해 폼을 사용하는 경우가 많습니다.
| 기본형 | 설명 |
| <form [속성="속성 값"]> 여러 폼 요소 </form> |
정보 저장, 검색, 수정 대부분의 작업은 정보를 저장하거나 검색, 수정하는 일인데 이런 작업은 모두 데이터베이스를 기반으로 합니다. 폼에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP, JSP같은 서버 프로그래밍을 이용합니다. |
| <label [속성="속성 값"]> 레이블 <input ...> </label> <label for="id이름">레이블</label> <input id="이름" [속성="속성값"]> |
폼 요소에 레이블 붙임 입력 창 옆에 아이디나 비밀번호처럼 붙여놓은 레이블을 만들 때 사용한다. |
| <fieldset [속성="속성 값"]> ... </fieldset> | 폼 요소 묶기 사용자가 정보를 입력하기에도 편리하고 화면도 깔끔하게 정리가 가능하다. 이렇게 하나의 폼 안에서 여러 구역을 나누어 표시하려고 할 때 <fieldset>,<legend>항목을 사용한다. |
| 속성 | 설명 | |
| method | 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정합니다. | |
| 속성 값 | get - 주소 표시줄에 사용자가 입력한 내용이 그대로 드러납니다. 256byte~4096byte까지의 데이터만 서버로 넘길 수 있습니다. 웹에서 주로 이 방식을 사용한다. | |
| post - 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않습니다. | ||
| name | 폼의 이름을 지정합니다. 한 문서 안에 여러 개의 <form>태그가 있을 경우, 폼들을 구분하기 위해 사용합니다. | |
| action | <form>태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정합니다. | |
| target | action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다. | |
| autocomplete | 이전에 입력했던 내용이 힌트로 표시되게 한다.<form action="register.php" autocomplete="off"> ...... </form> 같은 형태로 사용한다. |
|
사용자 입력을 위한 <input> 태그
이메일 주소, 전화번호, 날짜, 시간, 이미지, 버튼 등 사용자가 입력할 부분을 넣기 위해 사용한다.
| 기본형 | 설명 |
| <input type="유형" [속성="속성 값"]> | 사용자가 입력한 내용을 서버에서 받을 때 사용한다. |
| <input type="hidden" name="이름" value="서버로 넘길 값"> | 히든 필드는 화면상의 폼에는 보이지 않는 값을 입력받는다. |
| <input type="text" [속성="속성 값"]> | 한 줄짜리 일반 텍스트를 입력하는 필드입니다. |
| <input type="password" [속성="속성 값"]> | 사용자가 입력하는 내용을 *같은 문장으로 바꿔준다. |
| <input type="search" [속성="속성 값"]> | search검색상자를 만들 때 사용되는 타입입니다. |
| <input type="url" [속성="속성 값"]> | 웹 주소도 텍스트 필드에서 분화되어 type으로 별도로 지정됩니다. 이것으로 url입력란을 만들 수 있습니다. |
| <input type="email" [속성="속성 값"]> | 메일주소를 입력받을 수 있다. |
| <input type="tel" [속성="속성 값"]> | 전화번호 입력란을 만들 수 있다. |
| <input type="text" id=[속성="속성 값"]> | 자주 사용하는 값을 지정한다. |
type에서 사용할 수 있는 유형 값
| 유형 | 설명 |
| hidden | 사용자에게는 보이지 않지만 서버로 념겨지는 값을 가집니다. |
| text | 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣습니다. |
| search | 검색 상자를 넣습니다. |
| tel | 전화번호 입력 필드를 넣습니다. |
| url | URL 주소를 입력할 수 있는 필드를 넣습니다. |
| 메일 주소를 입력할 수 있는 필드를 넣습니다. | |
| password | 비밀번호를 입력할 수 있는 필드를 넣습니다. |
| datetime | 국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)를 넣습니다. |
| datetime-local | 사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)을 넣습니다. |
| date | 사용자가 지역을 기준으로 날짜(연, 월)를 넣습니다. |
| month | 사용자 지역을 기준으로 날짜(연, 월)를 넣습니다. |
| week | 사용자 지역을 기준으로 날짜(연, 주) |
| time | 사용자 지역을 기준으로 시간(시, 분, 초, 분할, 초)을 넣습니다. |
| number | 숫자를 조 절할 수 있는 화살표를 넣습니다. |
| range | 숫자를 조절할 수 있는 화살표를 넣습니다. |
| color | 색상 표를 넣습니다. |
| checkbox | 주어진 항목에서 2개 이상 선택 가능한 체크박스를 넣습니다. |
| radio | 주어진 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣습니다. |
| file | 파일을 첨부할 수 있는 버튼을 넣습니다. |
| submit | 서버 전송 버튼을 넣습니다. |
| image | submit 버튼 댓니 사용할 이미지를 넣습니다. |
| reset | 리셋 버튼을 넣습니다. |
| button | 버튼을 넣습니다. |
input의 텍스트 필드에서 사용할 수 있는 속성
| 속성 | 설명 |
| name | 텍스트 필드를 구별할 수 있도록 이름을 붙입니다. |
| size | 텍스트 필드의 길이를 지정합니다. 즉 화면에 몇 글자가 보이도록 할 것인지를 지정합니다. 예를 들어 최대 입력 가능한 글자 수가 10개인데 size를 5로 지정하면 텍스트 필드 크기가 5개인 크기에 맞추어져 나머지 5개 글자는 화면에 보이지 않습니다. |
| value | 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 표시될 내용입니다. 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시됩니다. |
| maxlength | 텍스트 필드에 입력할 수 잇는 최대 문자 개수를 지정합니다. |
날짜나 시간과 관련된 유형을 지정할 때 공통으로 사용하는 속성
| 속성 | 설명 |
| min | 날짜나 시간의 최솟값을 지정합니다. |
| max | 날짜나 시간의 최댓값을 지정합니다. |
| step | 스핀 박스의 화살표를 누를 때마다 날짜나 시간을 얼마나 조절할지를 지정합니다. |
| value | 화면에 표시할 초기값을 지정합니다. |
<input> 태그의 다양한 속성
| 기본값 | 설명 |
| <input type="text" id="uname" autofocus required> | 오토 포커스 속성을 사용하면 페이지를 불러오자마자 폼이ㅡ 원하는 요소에 마우스 커서를표시할 수 있습니다. |
| <input type="text" id="uid" placeholder="하이픈없이 입력"> | 사용자가 텍스트를 입력할 때 도움이 되도록 입력란에는 적당한 힌트내용을 표시하고있다가 그 필드를 클릭하면사라지도록 만들 수 있는 속성 |
| <label class="reg" for="uid">학번</label> <input type="text" id="subj" value="오전 9:00~11:00" readonly> |
입력란에 텍스트를 표시하는 것을 넘어 사용자가 입력하지 못하고 읽게만 만들 수 있는 속성 |
| <label class="reg" for="uname">이름</label> <intput type="text" id="uname" autofocus required> |
필드에 텍스트가 없을 경우 오류 메세지를 표시하는 속성 |
| <label class="reg" for="group">단체주문</label> <input type="number" id="group" value="10" min="10" max="100" step="10"> |
min 속성과 max속성은 각각 해당 필드의 최솟값과 최댓값을 지정합니다. |
| <label>아이디:<input type="text" id="user_id" size="10" minlength="4" maxlength="15"></label><small style="color:red;"> | size 속성은 텍스트 필드와 비밀번호 필드, 검색 필드 등 한 줄짜리 텍스트와 관련된 필드에서 화면에 몇 글자까지 보이게 할지 지정하고 maxlength 속성은 사용자가 최대 몇 글자까지 하는지 지정합니다. |
이외에도 <input> 태그에서 사용할 수 있는 속성들은 다음과 같습니다.
| 속성 | 설명 |
| formaction | 실행할 프로그램을 연결한다. type="submit"이나 type="image"일 때 사용할 수 있습니다. |
| formentype | 서버로 폼을 전송했을 때 폼 데이터를 어떤 방식으로 해석할 것인지 지정합니다. type="submit"이나 type="image"일 때 사용할 수 있습니다. |
| formmethod | 서버로 폼을 전송하는 방식(get, post 등)을 지정합니다. 이미 <form>태그 안에서 지정한 방식이 있어도 그 방식은 무시됩니다. |
| formnovalidate | <form> 태그 안에 novalidate 라는 속성이 있어서 서버로 전송할 때 폼 데이터가 유효(validate)한지 여부를 표시할 수 있는데 <input> 태그 안에서도 formnovalidate 속성을 이용해 유효성 여부를 표시할 수 있습니다. |
| formtarget | 폼 데이터를 서버로 전송한 후 서버의 응답을 어디에 표시할 것인지 타깃을 지정합니다. |
| height, width | type="image"일 때 이미지의 너비와 높이를 지정합니다. |
| list | <datalist>에 미리 정의해 놓은 옵션 값을 <input> 안에 나열해 보여 줍니다. |
| multiple | type="email"이나 type="file"일 때 두 개 이상의 값을 입력합니다. <input> 태그 안에 속성 이름만 표시하면 됩니다. |
여러 데이터 나열해 보여 주기
| 기본형 | 설명 |
| <select 속성="속성 값"> <option value="값" [속성="속성 값"]> 내용1 </option> <option value="값" [속성="속성 값"]> 내용2 </option> ... <optgroup label="다른 묶음"> <option value="속성"></option> </optgroup> </select> |
<select>, <optgroup>, <option> 드롭다운 목록 만들기 <optgroup label> 라벨 그룹 나누기 |
<select> 태그의 속성
| 속성 | 설명 |
| size | 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정한비다. -크롬은 +1개 표시됨 |
| multiple | 브라우저 화면에 여러 개의 옵션이 함께 표시되면서 ctrl키를 누를 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있습니다. |
<option> 태그의 속성
| 속성 | 설명 |
| value | 옵션을 선택했을 때 서버로 넘겨질 값을 지정합니다. |
| selected | 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정합니다. |
기타 다양한 폼 요소들
| 기본형 | 설명 |
| <button [ type="submit | reset | button"]> 내용 </button> | <button> 버튼 넣기 |
| 속성 값 | 설명 |
| submit | 폼을 서버로 전송합니다. <button type="submit">전송하기</button>과 같이 사용합니다. |
| reset | 폼에 입력한 모든 내용을 초기화시킵니다. <button type="reset">다시 쓰기</button>과 같이 사용합니다. |
| button | 버튼 형태만 만들 뿐 자체 기능은 없습니다. <button type="button">주소 입력</button>과 같이 사용합니다. |
| 기본형 | 설명 |
| <output [속성="속성 값"]> 내용 </output> | <output> 입력하는 값이 계산 결과라는 것을 브라우저에서 알려 줍니다. |
| <progress value="값" [max="값"]></progress> | <progress> 작업 진행 상태를 나타낼 때 사용하는 태그입니다. 작업진행(value값)은 부동소수점으로 표현 작업이 완료되려면 얼마나 많은 작업을 해야하는지 부동 소숫점으로 표현(max), 0보다 커야함(다운로드%) |
| <meter value="값" [속성="속성 값"]></meter> | <meter> progress와 거의 같으나 전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용한다. (하드디스크용량) |
meter관련 태그
| 속성 | 설명 |
| mint, max | 범위의 최솟값과 최댓값을 나타냅니다. 값을 정하지 않으면 0과 1로간주 |
| value | 범위 내에서 차지하는 값을 나타냅니다. |
| low | 대략 낮다고 할 정도의 값을 지정합니다. |
| high | 대략 높다고 할 정도의 값을 지정합니다. |
| optimum | 적당하다고 할 정도의 값을 지정합니다. |