select
select 태그는 input 태그와 마찬가지로 사용로주터 값을 받아 서버로 넘기기위한 목적이 있으나, 하나의 항목하에 선택지가 여러개 있을 때 유용하다.- 자동으로 닫는 태그 : x
select 태그 자체로는 값을 가지지 않으며 option 태그를 사용하여 그 값들을 나열할 수 있다.- 속성
name : 해당 select 태그에서 선택된 option 태그를 가진값을 서버로 전송할 때 사용할 식별자, 특별한 경우가 아니라면 동일한 form 내에서 고유한다. autofocus : 페이지가 로드되었을 때 해당속성을 가진 select 태그에 자동으로 포커스가 주어진다.disabled : 해당하는 select태그를 비활성화한다.(속성 값 없음)required : 해당 option태그의 값이 비어있을 수 없음을 의미한다.multiple : 해당 select 태그가 가지는 option 태그를 여러개 선택할 수 있다.
option
option 태그는 select 태그에 속해야 하며 서버로 전송될 실직적인 값을 포함한다.- 자동으로 닫는 태그 : x
- 속성
disabled : 해당하는 option태그를 비활성화한다.(속성 값 없음)selected : 해당 option 태그가 처음부터 선택된 상태로 지정한다.(속성 값 없음)value : 해당 option 태그가 선택되었을 때 select 가 가진 name 속성 값으로 지정될 값이다. 별도로 지정 되지 않을 경우 해당 태그가 가진 내부 내용이 값이 된다.
optgroup
optgroup 태그는 서로 관련있는 option 태그를 묶어 내기 위한 목적으로 사용한다.- 자동으로 닫는 태그 : x
- 자체로는 그 어떤값을 가지지 않고 역할이 없다.
- 속성
label : 표시할 텍스트를 지정한다.disable : 해당 optgroup 태그를 비활성화 한다. 단, 이에 종속된 option 태그들도 같이 비활성화 된다.(속성 값 없음)
textarea
textarea 태그는 일반적인 type 이 text 인 input 태그와 유사하나 개행을 포함할 수 있다.- 자동으로 닫는 태그 : x
- 단,
textarea 는 이가 가지는 값을 지정하기 위해 value 속성을 사용하는 것이 아닌, 태그의 내용으로 지정한다.
- 속성
name : (필수)해당 textarea 가 가진 값을 서버로 전송할 때 사용할 식별자, 특별한 경우가 아니라면 동일한 form 에서 고유해야한다.autofocus : 페이지가 로드되었을 때 해당속성을 가진 textarea 태그에 자동으로 포커스가 주어진다.(속성 값 없음)disabled : 해당하는 textarea태그를 비활성화한다.(속성 값 없음)maxlength : 문자열의 값을 받을 때 최대 길이를 지정한다.minlength : 문자열의 값을 받을 때 최소 길이를 지정한다. 단, 비어있을 때에는 최소 길이 검사를 하지 않는다.required : 해당 textarea태그의 값이 비어있을 수 없음을 의미한다.(속성 값 없음)readonly : 해당 textarea 태그가 가진 값을 수정하지 못하도록 한다.(속성 값 없음)
label
label 태그는 input, select, textarea 와 관련하는 이에 대한 관련 설명을 작성하기 위해한다.- 자동으로 닫는 태그 : x
label 태그는 유관 태그에 대한 설명을 문자열로 가지며, 스크린 리더가 유관 태그에 대한 설명으로 label 의 내부 내용을 사용한으로 반드시 작성해야하며 HTML5 표준이다.- 작성 방법은 아래 두가지가 있다.
label 태그가 유관 태그를 직접 내포하는 경우 <label>
<input name="agree" type="checkbox">
<span>이용약관을 읽어보았으며 이해하였고 동의합니다.</span>
</label>
label 태그의 for 속성 값을 유관 태그가 가지는 id 속성 값으로 하는 경우 <input id="agreeCheck" name="agree" type="checkbox">
<label for="agreeCheck">이용약관을 읽어보았으며 이해하였고 동의합니다.</label>
- id 값은 하나의 HTML 문서내에서 중족되어서는 안 됨으로 사용에 각별한 유의를 해야한다.
예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>input, select, textarea, label 태그</title>
</head>
<body>
<form>
<label>
<span>거주지를 선택하세요.</span>
<select name="city">
<optgroup label="대구광역시">
<option value="0531">동구</option>
<option value="0532">서구</option>
<option value="0533">북구</option>
<option value="0534">남구</option>
</optgroup>
<optgroup label="인천광역시">
<option value="0321">동구</option>
<option value="0322">연수구</option>
<option value="0323">미추홀구</option>
</optgroup>
</select>
</label>
<input id="rememberCheck" type="checkbox" name="remember">
<label for="rememberCheck">
자동 로그인
</label>
<input name="remember" type="checkbox">
<span>자동 로그인</span>
<br><br>
<textarea>게시판</textarea>
<input type="submit" value="제출">
</form>
</body>
</html>