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>