반응형
Index 항목을 클릭하면 해당 위치로 이동합니다.
INDEX
1. <form>
2. <label>
3. <fieldset> , <legend>
4. <input>
5. <input> 태그의 type
6. <input> 태그의 속성
7. 드롭다운 목록 만들기
8. <button> 태그
9. <meter> 태그
1. <form>
- 기본형
<form [속성 = " 속성 값"]>
~ 여러 폼 요소 ~
</form>
<form action="search.php" method="post">
<input type="text" title="검색">
<input type="submit" value="검색">
</form>
사용자가 입력한 내용을 search.php로 넘겨준다.
search.php는 서버프로그래밍 언어를 공부해 따로 작성해야 한다.
2. <label> - 폼 요소에 레이블 붙이기
-기본형
<label>아이디<input type="text"></label>
2-1) 라디오 버튼과 체크박스에서 사용하는 <label>태그
<h3>수강 분야(다수 선택 가능)</h3>
<ul>
<li><input type="checkbox" value="grm">문법 </li>
<li><input type="checkbox" value="wr">작문</li>
<li><input type="checkbox" value="rd">독해</li>
</ul>
<h3>수강 과목(1과목만 선택 가능)</h3>
<ul>
<li>
<label><input type="radio" name="subject" value="eng">영어회화</label>
</li>
<li>
<label><input type="radio" name="subject" value="ch">중국어회화</label>
</li>
<li>
<label><input type="radio" name="subject" value="jp">일어회화</label>
</li>
</ul>수강 분야(다수 선택 가능)
- 문법
- 작문
- 독해
수강 과목(1과목만 선택 가능)
3.<fieldset> , <legend> - 폼 요소 그룹으로 묶기
<form>
<fieldset>
<legend>개인 정보</legend>
<ul>
<li>
<label for="name">이름</label>
<input type="text" id="name">
</li>
<li>
<label for="mail">메일 주소</label>
<input type="text" id="mail">
</li>
</ul>
</fieldset>
<fieldset>
<legend>로그인 정보</legend>
<ul>
<li>
<label for="id">아이디</label>
<input type="text" id="id">
</li>
<li>
<label for="pwd">비밀번호</label>
<input type="text" id="pwd">
</li>
</ul>
</fieldset>
</form>