들어가기 앞서..
이번 게시글은 폼태그 모음집2입니다. 앞선 게시글 폼태그 모음집 1과 이어집니다.
무엇을 배울까 ?
select 관련 태그 , textarea , button , fieldset
선택창을 제작하여 선택할수 있다.
메모장처럼 글쓰는 창을 만들수 있다.
버튼 누를수 있는 태그를 만든다
입력 태그를 묶고 제목을 입력할수 있다.
select
여러개의 리스트에서 여러개의 아이템을 선택할때 사용한다.
태그들
select 선택할수 있는 모음을 만든다.
option 선택값들을 만든다
optgroup 선택값들을 묶는다 .
<select name="DVD">
<option value="인디아나존스" selected>인디 </option>
<option value="킹" selected>킹콩 </option>
<option value="아마존" disabled>브레이킹 </option>
</select>모두 닫는 태그를 사용한다.
option의 value값은 사용자에게 보여지지 않는다. selected 옵션을 줄수있다. 중복이라면 맨 아래 selected가 선택된다.disabled 옵션도 가능하다.
<select name="movie">
<optgroup label="19세이상" disabled>
<option name="13구역" selected> 얼티메이텀</option>
<option name="존" disabled> 존윅</option>
</optgroup>
<optgroup label="전체이용가">
<option value="맨발"> 맨발의기봉이</option>
<option value="hidden">007</option>
</optgroup>
</select>option태그에 name과 value값을 주었다. 사용자에게 보여지지는 않는다.
<select name="cars2" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab"> </option>
<option value="fiat">Fiat</option>
<option value="audi" selected>Audi</option>
</select>select에 multiple 옵션을 주면 size의 값에 맞춰 선택이 모두 보인다.
textarea
여러줄의 글자를 입력할때 사용한다.
<textarea rows="5" cols="10">빈칸을 채워주세요</textarea>rows 값은 글자수가 아닌 것 같다.
button
버튼을 생성한다. <input type="button">과 유사하지만 input 태그는 빈 태그인 반면 button 태그는 그렇지 않다. 따라서 button 요소에는 텍스트나 이미지 같은 콘텐츠를 사용할 수 있다.
click!
click!
<button onclick="alert('close')">click!</button>
<input type="button" value=" click" onclick="alert('close')">click!</input>button 태그는 태그 사이에 값을 입력하지만 input 태그는 value에 값을 입력해야 버튼에 글자가 들어간다.
Click me
button 태그는 어트리뷰트만을 받아들이는 input 태그와 달리 콘텐츠로 문자열은 물론 HTML 요소를 받을 수도 있다는 장점이 있다.
오래된 IE를 지원해야 한다면 input 태그를 사용하는 것이 바람직하다.
fieldset
입력 양식들을 그룹화 한다. legend 태그를 사용하여 제목을 정의한다.
Login Username Password 제출 <fieldset>
<legend>Login</legend>
Username <input type="text" name="username">
Password <input type="text" name="password">
<button value="btn" > 제출 </button>
</fieldset> 폼태그 끝!
