| 폼 요소 | 설명 |
| <input type="text"> | 한 줄 텍스트 입력 창 |
| <input type="submit"> | 웹 서버로 폼 데이터를 전송시키는 버튼 |
| <input type="checkbox|radio"> | 체크박스와 라디오버튼 |
| <input type="month|week|date|time|datetime-local"> | 년, 월, 일, 시간 등의 시간 정보 입력 창 |
| <input type="number|range"> | 스핀 버튼과 슬라이드바로 편리한 숫자 입력 창 |
| <input type="email|url|tel|search"> | 이메일, URL, 전화번호, 검색키워드 등 형식 검사 기능을 가진 텍스트 입력 창 |
| <input type="file"> | 로컬 컴퓨터의 파일을 선택하는 폼 요소 |
| <button type="button|reset|submit"> | 단순 버튼, reset, submit 버튼 |
| <textarea> | 여러 줄의 텍스트 입력 창 |
[ 코드 ]
<!DOCTYPE html>
<head>
<title>웹 폼 만들기(회원가입)</title>
</head>
<body>
<h3>웹 폼 만들기(회원가입)</h3><hr/>
<form name="info" action="https://search.naver.com/search.naver" method="get">
사용자 ID : <input type="text" size="15" value=""><br/>
비밀 번호 : <input type="password" size="15" value=""><br/>
<!-- 이메일 고정값 설정 : placeholder -->
이메일 : <input type="email"><br/>
성별 : 여자<input type="checkbox" value="F" checked>
남자<input type="checkbox" value="M"><br/>
생년월일 : <input type="date" value="1994-12-31"><br/>
나라 : <input type="text" list="countries">
<datalist id="countries">
<option value="한국">
<option value="미국">
<option value="프랑스">
</datalist><br/>
<input type="submit" value="완료">
</form>
</body>
</html>
[ 실행 화면 ]
'Web > HTML5' 카테고리의 다른 글
| HTML(11) <details>와 <summary> 활용 (0) | 2020.11.03 |
|---|---|
| HTML(10) HTML5 문서 구조화 연습 (0) | 2020.11.03 |
| HTML(9) 파일 다운로드 링크 만들기 (0) | 2020.11.03 |
| HTML(8) 하이퍼링크 만들기 (0) | 2020.11.03 |
| HTML(7) 태그로 이미지 삽입, 리스트 만들기<ol> (0) | 2020.11.03 |
댓글