학습 내용
form: 사용자의 입력을 받는 공간
아래 실습에서 사용하지는 않았지만 readonly, disabled라는 속성들도 있다.
readonly는 값을 수정할 수 없게 하고, disabled는 값을 수정할 수 없으면서 form을 통해 넘어가지도 않게 한다.
Id, name, class의 차이는 해당 블로그의 설명을 참고하자.
input type='submit'과 button type='submit'의 기능은 동일하지만, button이 디자인 요소를 넣을 때 더 적합하다.
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style></style>
</head>
<body>
<form action="">
<fieldset>
<legend>필수입력정보</legend>
<label for="username">이름</label>
<input
type="text"
name="username"
id="username"
required
autofocus
placeholder="홍길동"
/>
<br />
<label for="userid">아이디</label>
<input type="text" name="userid" id="userid" required />
<br />
<label for="password">비밀번호</label>
<input type="password" name="password" id="password" required />
<br />
<label for="email">이메일주소</label>
<input type="email" name="email" id="email" required />
<br />
<label for="phone">핸드폰번호</label>
<input type="tel" name="phone" id="phone" required />
</fieldset>
<fieldset>
<legend>선택입력정보</legend>
<label for="birth">생년월일</label>
<input
type="date"
name="birth"
id="birth"
min="1900-01-01"
max="2024-02-01"
/>
<br />
<label for="age">나이</label>
<input type="number" name="age" id="age" min="0" max="120" />
<br />
<label for="graduate">졸업월</label>
<input type="month" name="graduate" id="graduate" />
<br />
<label for="blog">블로그주소</label>
<input type="url" name="blog" id="blog" />
<br />
<label for="passion">열정</label>
<input type="range" name="passion" id="passion" value="0" />
<br />
<label for="resume">이력서</label>
<input type="file" name="resume" id="resume" multiple />
<br />
<label>수강 목록:</label>
<input type="checkbox" name="com1" id="com1" value="com1" />
<label for="com1">컴프1</label>
<input type="checkbox" name="com2" id="com2" value="com2" />
<label for="com2">컴프2</label>
<input type="checkbox" name="coms" id="coms" value="coms" />
<label for="coms">컴과사</label>
<br />
<label>학년:</label>
<input type="radio" name="grade" value="grade_1" id="grade_1" />
<label for="grade_1">1학년</label>
<input type="radio" name="grade" value="grade_2" id="grade_2" />
<label for="grade_2">2학년</label>
<input type="radio" name="grade" value="grade_3" id="grade_3" />
<label for="grade_3">3학년</label>
<input type="radio" name="grade" value="grade_4" id="grade_4" />
<label for="grade_4">4학년 이상</label>
<br />
<label for="hanhoyeol">한마디</label>
<br />
<textarea
name="hanhoyeol"
name="hanhoyeol"
id="hanhoyeol"
cols="40"
rows="5"
>
새우깡 좋아하는 꿀벌</textarea
>
<br />
<label for="toeic">토익점수</label>
<select name="toeic" id="toeic">
<option value="toeic699">토익 700미만</option>
<option value="toeic700">토익 700이상</option>
<option value="toeic800">토익 800이상</option>
<option value="toeic900" selected>토익 900이상</option>
</select>
<br />
<!-- 주의: type='list'가 아닌, list 속성에 datalist의 id를 부여해야 함. -->
<label for="plang">프로그래밍 언어 선택</label>
<input list="plangsort" id="plang" , name="plang" />
<datalist id="plangsort">
<option value="C"></option>
<option value="C++"></option>
<option value="JAVA"></option>
<option value="Python3"></option>
<option value="JavaScript"></option>
</datalist>
</fieldset>
<input type="hidden" value="숨겨진 값" />
<button type="button">
대충 기능은 없고 자바스크립트가 처리하는 버튼
</button>
<br />
<button type="reset">마법의 버튼</button>
<input type="submit" value="제출하기" />
</form>
</body>
</html>
Reference
'프론트엔드 > HTML' 카테고리의 다른 글
| [HTML] head 태그 (2) | 2024.02.04 |
|---|---|
| [HTML] 이미지 & 멀티미디어 태그 (0) | 2024.01.31 |
| [HTML] 영역 태그 (0) | 2024.01.31 |
| [HTML] 태그 (0) | 2024.01.30 |
| [HTML] VSCode Emmet (0) | 2024.01.30 |
