form
input을 이용해 요소들의 타입과 이름, value를 지정하여 form을 만들어보겠습니다.
<h1>input 요소들</h1>
<form>
<!-- fieldset은 여닫는 부분 사이를
사각형으로 영역을 만들어 줌-->
<fieldset>
<legend>회원가입</legend>
<p> 아이디 : <input type ="text" /></p>
<p> 비밀번호 : <input type="password" /></p>
<p>메일 수신여부
<input type="radio" name="recieve" > 예
<input type="radio" name="recieve" > 아니오
</p>
<p> 식사여부 :
<input type="radio" name="eat"> 먹음
<input type="radio" name="eat"> 안먹음
<input type="radio" name="eat"> 먹는 중
</p>
<p>현재 공부 중인 것
<input type="checkbox" name="study" />HTML
<input type="checkbox" name="study" />CSS
<input type="checkbox" name="study" />JS
</p>
<p>
제출
<input type="submit" value="전송">
<input type="reset" value="취소">
<input type="button" value="확인"
</p>
</fieldset>
</form>
password 타입으로 설정하면 ***으로 문자가 가려서 보여집니다.
radio 타입으로 두개 이상의 컬럼들 중 하나만 선택하도록 할 수 있습니다.
checkbox 타입은 다수의 컬럼들을 체크할 수 있도록 해줍니다.
submit, reset을 이용해 입력된 자료들을 승인하거나 취소할 수 있습니다.
<p>지역선택
<select>
<optgroup label="마포구">
<option>서교동</option>
<option>동교동</option>
<option>합정동</option>
</optgroup>
<optgroup label="동대문구">
<option>전농동</option>
<option>이문동</option>
<option>휘경동</option>
<option>회기동</option>
</optgroup>
</select>
optgroup label =""을 통해 자료들을 그룹끼리 나누어줄 수 있습니다.
<body>
<fieldset>
<legend>추가된 폼 요소들</legend>
<form>
<p>검색 : <input type="search"></p>
<p>이메일 : <input type="email"></p>
<p>사이트주소 : <input type="url"></p>
<p>전화번호 : <input type="tel"></p>
<p>나이 : <input type="number" min="0" max="150"></p>
</form>
</fieldset>
</body>
</html>
search, email, url, tel, number 등 다양한 타입을 적용해볼 수 있습니다.
min과 max를 이용해 수들의 최소값과 최대값을 지정할 수 있습니다.
배울 게 참 많네요.