<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_기본 폼태그의 활용</title>
</head>
<body>
<h1>자기 소개 양식</h1>
<form action="" method="get">
<fieldset>
<legend>당신의 성함을 입력해주세요</legend>
last name : <input type="text" name="last name" placeholder="성을 입력해주세요" size="30"> <br>
first name : <input type="text" name="first name" placeholder="성을 제외한 이름을 입력해주세요" size="30">
</fieldset>
<fieldset>
<legend>본인의 필수정보</legend>
<p>아이디를 입력해 주세요</p>
ID: <input type="text" name="id">
<p>비밀번호를 입력해주세요</p>
PW: <input type="password" name="pw">
<p>연락처를 입력해주세요</p>
cellphone:
<select name="phoen" id="">
<option value="010">010</option>
<option value="02">02</option>
<option value="031">031</option>
</select>
- <input type="tel" size="5">
- <input type="tel" size="5">
<p>당신의 사진을 업로드해주세요</p>
<input type="file">
<p>당신의 성별을 선택해주세요</p>
<label for="male">남자</label>
<input id="male" type="radio" name="gender" value="male">
<label for="female">여자
<input id="female" type="radio" name="gender" value="female"></label>
<!-- 부모 자식 사이로 묶어서 label을 사용할수도 있지만 잘 사용하지 않는다 -->
</fieldset>
<fieldset>
<legend>추가 정보</legend>
<p>배우고 싶은 과목을 선택해주세요</p>
<label for="java">java</label>
<input id="java" type="checkbox" name="subject">
<label for="jsp">jsp</label>
<input id="jsp" type="checkbox" name="subject">
<label for="html">html</label>
<input id="html" type="checkbox" name="subject">
<label for="css">css</label>
<input id="css" type="checkbox" name="subject">
<label for="javascript">javascript</label>
<input id="javascript" type="checkbox" name="subject">
<p>좋아하는 음식을 선택해주세요</p>
<select name="favorite_food" id="" multiple>
<option value="gobchang">곱창,대창</option>
<option value="nakgopsae">낙곱새</option>
<option value="burger">수제버거</option>
<option value="ricecake">떡</option>
<option value="sushi">초밥</option>
</select>
<p>본인의 소개를 간단하게 입력해주세요</p>
<textarea name="introduce_myself" id="" cols="30" rows="10" maxlength="200"></textarea> <br>
<p>본인이 좋아하는 색상을 선택해 주세요</p>
<input type="color">
<br>
<p>본인의 생년월일을 선택해 주세요</p>
<input type="date">
<br>
<p>원하는 볼륨으로 조절해 주세요</p>
<input type="range">
<br>
</fieldset>
<br> <input type="submit" value="소개 완성후 클릭">
<br>
<br>
</form>
</body>
</html>
'HTML > code' 카테고리의 다른 글
| 블럭요소와 인라인요소의 차이 (0) | 2023.03.28 |
|---|---|
| div를 이용한 레이아웃 (0) | 2023.03.28 |
| sementic를 이용한 레이아웃 (0) | 2023.03.28 |
| pre태그 (0) | 2023.03.28 |
| 비디오 태크 (0) | 2023.03.28 |