1. form 태그 / input 태그
1-1. form 태그
- 사용자로부터 다양한 형태의 데이터를 입력받기 위한 요소들을 담는 컨테이너
> 입력요소(input, select, textarea 등)는 <form>태그 내에서 사용
> 결과 화면에는 아무것도 표시되지 않음
> 기본형태
|
<form action="URL" method="전송방식">
...
</form> |
|
속성 |
값 |
설명 |
|
action |
"URL" |
폼 데이터를 전달받아 처리할 때 페이지의 URL
|
|
method |
"전송방식" |
데이터 전송에 사용하는 HTTP 방식
- method="get" 또는 method="post"
|
|
GET 방식과 POST 방식의 차이 |
|
구분 |
method="get" |
method="post" |
|
전송 형태 |
- 기본값(default)
- 폼 데이터가 이름과 값의 형태로 URL에 포함되어 전송
- "URL?name=value&age=value" |
- HTTP Request 헤더 속에 포함시켜 전송 |
|
데이터 길이 |
최대 2048 글자 (4096바이트) |
- 제약없음 |
|
보안 |
- 보안이 중요하지 않은 데이터(예: 검색어) 전달에 사용
- '이전페이지' 버튼을 통한 이동 가능
- 양이 많지 않은 데이터 전송에 용이 |
- 보안이 필요한 로긍니 정보, 회원 정보 등의 전송에 사용
- '이전페이지'를 누르면 데이터를 다시 보내야 한다는 경고가 표시 |
1-2. input 태그
- 사용자 데이터의 입력을 위한 다양한 입력 타입을 지정.
|
<input type="입력필드 유형" 속성="값"> |
> type 속성의 값에 따라 다양한 형태의 입력 타입을 제공
> 종료태그 없이 사용 가능
> 속성(type 속성의 값에 따라 사용 가능한 속성이 달라짐)
→ width, src, autofocus, name, placeholder, readonly, required, size, type, value 등등 약 30가지 속성이 있다.)
> 이전부터 사용한 속성값 (HTML4)
|
type="속성값" |
설명 |
|
text |
- 한 줄짜리 텍스트
- 데이터를 출력하는 용도로도 사용 |
|
password |
- 비밀번호
- 입력한 문자가 ' * ' 과 같은 문자로 표현 |
| radio |
- 라디오 버튼 (단일선택)
- 같은 그룹의 라디오 버튼들에 대해서만 배타적 선택
- name, value, checked |
text와 password의 value는 초기값을 나타내지만, radio와 checkbox는 입력과 관련하여 서버로 전달되는 값을 나타낸다.
- radio와 checkbox는 각 그룹핑을 name으로 지정한다.
→ name이 같은 radio끼리는 한 그룹으로 된다. |
| checkbox |
- 체크박스 (다중선택)
- name, value, checked |
| hidden |
숨겨진 상태로 전송 |
| file |
업로드를 위한 파일 선택
- 자신의 시스템이 있는 파일을 선택하는 버튼을 생성
- 속성
accept="파일유형" → 선택 가능한 파일의 유형을 지정
multiple → 하나 이상의 값을 선택할 수 있도록 지정
<input type="file" accept="image/*" multiple>
|
|
image |
이미지를 제출 버튼으로 지정
- 이미지를 제출 버튼으로 만들때 사용
- 속성
src(필수), width, height, alt
<input type="image" src="flower.jpg" width="100" height="100" alt="제출버튼">
|
|
submit |
제출 버튼
- 입력한 데이터를 <form> action 속성에서 지정한 서버의 페이지로 전송하는 버튼
- value="버튼명" 속성 → 버튼위에 표시되는 이름
<form id="frm_id">
~~~
</form>
<input type="submit" from="frm_id"> |
|
reset |
입력 초기화 버튼
- 입력한 내용을 모두 지워서 초기 상태로 만드는 취소 버튼
- value="버튼명" 속성 → 버튼위에 표시되는 이름 |
| button |
클릭 가능한 일반 버튼
- 클릭을 통해 사용자가 지시한 명령을 수행하기 위한 버튼
- value="버튼명" 속성 → 버튼 위에 표시될 이름
* <button> 태그
> 클릭 가능한 버튼을 정의하는 태그
> 버튼 위에 텍스트나 이미지도 표현 가능
<button type="button | submit | reset" name="이름">
버튼 위에 표시될 텍스트나 이미지를 지정
</button>
* form 태그 내에서 button 태그를 사용하게 되면 데이터 전송이 제대로 이루어지지 않을수 있다. 때문에 form태그 내에서는 <input type="button"> 을 사용하는것이 옳다.
|
> HTML5부터 추가된 속성값 (HTML5)
|
type="속성값" |
설명 |
|
search |
검색어 입력
> type="text"와 동일한 기능/모양, 단지 입력 대상을 명확히 지정함
> 입력한 텍스트를 초기화 해주는 'X' 버튼이 input 박스의 오른쪽에 생긴다. |
|
tel |
전화번호
> type="text"와 동일한 기능/모양, 단지 입력 대상을 명확히 지정함 |
| url |
URL 입력
> type="text"와 유사한 기능/모양
> 자동으로 유효성 검사 → 형식에 맞지 않으면 경고 메시지 출력 |
| email |
이메일 주소
> type="text"와 유사한 기능/모양
> 자동으로 유효성 검사 → 형식에 맞지 않으면 경고 메시지 출력
> multiple속성 → 콤마로 구분된 여러개의 이메일 주소 입력 |
| number |
특정 범위의 숫자
> input박스 우측에 스핀버튼(위아래 버튼) 자동생성, 조절가능
> 속성
- min="최소값" / max="최대값"
- step="입력값의 유효간격" (스핀버튼 조절)
- vaule="초기값" |
| range |
특정 범위의 숫자
> 좌우 레인지형식 자동생성, 조절가능
> 애매한 숫자나 덜 정확한 숫자를 입력받을때 사용
> 속성
- min="최소값" / max="최대값"
- step="입력값의 유효간격" (좌우버튼 조절)
- vaule="초기값" |
| color |
색상표를 통한 색상 입력 |
| datepickers |
date |
날짜 → 년, 월, 일 입력 |
| month |
월 → 년, 월 입력 |
| week |
주차 → 년, 주차 입력 |
| time |
시간 → 시, 분, 초 입력 |
|
datetime |
날짜와 시간 → UTC 시간대를 기준으로 년, 월, 일, 시간 입력(HTML 표준에서 제외) |
| datetime-local |
날짜와 시간 → 지역 시간대를 기준으로 년, 월, 일, 시간 입력 |
> 그밖의 속성
|
속성명 |
값 |
설명 |
|
name |
"string" |
form 태그를 통해 서버로 전송하기 위한 구분을 위해 각 form 태그의 이름을 붙여준다. |
| autofocus |
"속성명" |
페이지가 로딩됐을때 해당 태그로 커서이동 |
| size |
"number" |
화면에 보여줄 입력박스의 글자수 |
| maxlength |
"number" |
입력받을수 있는 최대 문자수 |
| value |
"값" |
초기값 |
| disabled |
"속성명" |
비활성화 시켜주기 위한 속성.
비활성화된 데이터는 서버로 넘어가지 않는다. |
| placeholder |
"값" |
사용자의 입력방식을 유도하기 위한 참조글자 |
|
autocomplate |
"on"
"off" |
사용자가 이전에 입력했던 내용을 자동완성 시켜주는 속성
form 태그 및 input태그 등에 사용 가능 |
| title |
"텍스트" |
입력 형식에 대한 툴팁기능 |
|
required |
"속성명" |
이 요소에 대해서는 값을 반드시 입력해야 한다고 경고메세지를 표현 |
|
pattern |
- 이름
[a-zA-Z]{4, 10}
→ [문자의 종류]{문자의 갯수}
- 전화번호
0\d{1,2}\-\d{3,4}\=\d{4}
- 주민등록번호
\d{6}\-[1-4]\d{6}
- 이메일
^[a-zA-Z0-9]+@([a-zA-Z0-9_\-\.]+]\.([a-zA-z]{2,5})$
|
입력값에 대한 유혀성 검사를 위한 정규 표현식을 지정
- 정규표현식 → 특정한 규칙을 가진 문자열을 표현하는데 사용하는 수식 |
2. textarea 태그 / select 태그 / datalist 태그
2-1. <textarea> 태그
- 여러 줄에 해당하는 텍스트를 입력받을 떄 사용
> <input type="text"> → 한 줄에 해당하는 짧은 텍스트 입력
|
<textarea rows="숫자값" cols="숫자값">
텍스트 영역에 표시할 내용(출력용)
</textarea> |
> 주요속성 → name, rows, cols, wrap, readonly
> autofocus, disabled, form, maxlength, placeholder, required 등도 사용 가능
|
주요 속성 |
값 |
설명 |
|
name |
"이름" |
텍스트 영역의 이름 |
| rows |
"숫자" |
텍스트 영역의 높이(라인 수) |
| cols |
"숫자" |
텍스트 영역의 너비(한 줄에 입력할 수 있는 글자 수) |
|
wrap |
"soft"
→ (default) 자동으로 줄바꿈이 포함되지 않음
"hard"
→ 자동으로 줄바꿈이 포함되어 전송(cols 속성 지정이 필요) |
폼으로 전송될 때 줄바꿈 포함 여부 |
|
readonly |
생략가능, "속성명" |
텍스트 영역을 읽기 전용(내용 출력) 으로만 사용 |
2-2. <select> 태그
- 드롭다운 리스트를 만들때 사용
> <option>태그
→ <select>의 하위 태그로서, 목록에서 각 항목을 정의
|
<select 속성="값">
<option value="값">항목1</option>
<option value="값">항목2</option>
<option value="값">항목3</option>
</select> |
|
속성 |
값 |
설명 |
| select |
name |
"이름" |
드롭다운 리스트의 이름을 지정 |
| size |
"숫자" |
한 번에 화면에 보여지는 항목의 개수를 지정 |
| multiple |
생략 |
여러 항목을 한꺼번에 선택할 수 있도록 지정
→ ctrl 키나 shift 키를 누른채로 선택 가능 |
| option |
disabled |
생략 |
해당 항목을 비활성화 시킴 |
| label |
"텍스트" |
긴 항목을 짧은 레이블로 value의 우측에 표시 |
| selected |
생략 |
페이지 로드 시에 초기값으로 선택되는 항목을 지정 |
| value |
"텍스트" |
서버로 전달되는 항목의 값을 지정 |
|
label |
"텍스트" |
option 태그의 우측 참고텍스트 지정 |
2-3. <datalist> 태그
- <input type="text">에 대한 옵션 목록을 지정
> 포커스를 받으면 미리 입력한 옵션이 드롭다운 형태로 표시
|
<input type="text" list="datalist_id">
<datalist id="datalist_id">
<option value="값1" label="항목1">항목1</option>
<option value="값2" label="항목2">항목2</option>
<option value="값3" label="항목3">항목3</option>
<option value="값4" label="항목4">항목4</option>
</datalist> |
|
속성 |
값 |
설명 |
|
id |
"input 태그의 list값" |
datalist에 기술된 항목이 드랍다운 됨 |
2-4. <optgroup> 태그
- <select>태그 내에서 연관된 항목들을 그룹핑
|
<select name="subject" size="1">
<optgroup label="그룹핑네임1(텍스트)">
<option value="값1">항목1</option>
<option value="값2">항목2</option>
<option value="값3">항목3</option>
</optgroup>
<optgroup label="그룹핑네임2(텍스트)">
<option value="값4">항목4</option>
<option value="값5">항목5</option>
<option value="값6">항목6</option>
</optgroup>
</select> |
3. fieldset 태그 + legend 태그 / label 태그
3-1. <fieldset> 태그
- 폼에서 사용된 요소들을 그룹핑 → 사각형 테두리 안에 표시
- <legend>태그
> <field> 태그 내에서 사용
> 그룹핑되는 요소들에 대한 캡션을 사각형 테두리 선 상에 표시
3-2. <legend> 태그
- <input> 태그에 대한 레이블 정의 → 시각적으로 효과 없음
> <lable> 태그 내에 있는 텍스트를 클릭해도 해당하는 <input> 태그의 선택이 가능
|
<form>
<p><label>아이디: <input type="text" name="id" value="HwiDoorumi"></label>
<p><label>비밀번호: <input type="password" name="pwd"></label></p>
<fieldset>
<legend>성별</legend>
<label for="male">남자</label>
<input type="radio" id="male" name="gender" value="male" checked><br/>
<label for="female">여자</label>
<input type="radio" id="female" name="gender" value="female"><br/>
</fieldset>
</form> |