<input type="password"> 사용자가 입력하는 문자 대신 다른 글자를 출력하여 다른 사람이 볼 수 없게 한다.
<textarea></textarea> 여러 줄의 텍스트를 입력받을 때 사용한다.
<input type="search|email|url|tel"> 이메일, url, 전화번호, 검색키워드 등 형식 검사 기능을 가진 텍스트 입력 창으로, 디지털기기에서 브라우저를 불러올 때 유형을 인식하여 그에 맞는 권장사항을 보여준다. 예를 들면 tel 타입의 경우, 스마트폰에서 숫자만 있는 키보드가 켜지는 것을 볼 수 있다. 이메일의 경우 @를 포함하지 않으면 정보를 전송할 수 없으며, url의 경우 http://와 .com이 포함되어야 정보를 전송할 수 있다. search의 경우 활성화되면 자체적으로 reset버튼이 있어 reset이 가능하다. tel의 경우는 전화번호를 자유롭게 입력하도록 허용하고 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="get">
<!-- value: 최초에 출력되는 값, placeholder: 입력 창에 설명 글을 적을 수 있다. maxlength : 입력할 수 있는 문자의 최대 개수를 지정한다.-->
<!-- autofocus는 맨처음에 활성화하고자하는 창을 설정할 수 있다. -->
<label for="name">이름</label><input type="text" name="name" id="name" maxlength="8" value="김땡땡" autofocus><br>
<label for="pw">비밀번호</label><input type="password" name="pw" id="pw" maxlength="12" placeholder="비밀번호를 작성해주세요."><br>
<!-- cols, rows: 입력 창의 크기를 설정할 수 있다(영어기준으로 문자 수를 적는다.) -->
<label for="email">이메일</label><input type="email" name="email" id="email"><br>
<label for="phone">전화번호</label><input type="tel" name="phone" id="phone"><br>
<label for="url">SNS주소</label><input type="url" name="url" id="url"><br>
<label for="requiestion">요청사항</label><br><textarea name="requestion" id="requestion" placeholder="요청사항에 대해 작성해주세요." cols="20" rows="10"></textarea><br>
<button type="submit">등록</button><br>
<hr>
<label for="search">검색</label><input type="search" name="search" id="search" value="자체적으로 reset기능을 가지고 있다.">
<button type="button">검색하기</button><br>
<!--readonly는 텍스트 창을 비활성화 시킨다-->
<input type="text" name="none" id="none" readonly>
</form>
</body>
</html>
이름 부분에 로딩되자마자 창이 활성화된 모습을 볼 수 있다. 검색 밑에 있는 창은 비활성화가 되어있어 작성을 하려고해도 할 수 없다.
숫자 입력
<input type="number|range"> number의 경우 사용자가 숫자를 입력할 수 있도록 하며, 필드 우측에 숫자 크기를 조절할 수 있는 버튼이 생긴다. range의 경우 정확한 값을 작성하는 것이 아닌 숫자를 정의할 수 있는 슬라이더 컨드롤이 생긴다. min, max 및 step 등의 속성을 이용하여 숫자를 제한할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="get">
<!-- min은 최소 숫자, max는 최대 숫자, step은 입력할 수 있는 숫자들 사이의 간격을 지정할 수 있다.-->
<label for="number">number</label><input type="number" name="number" id="number" max="50" min="20" step="5"><br>
<label for="range">range</label><input type="range" name="range" id="range" max="10" min="1" step="2"><br>
</form>
</body>
</html>
number의 경우에는 사용자가 직접 적을 수 있다는 함정이 있다. range의 경우 1부터 시작해서 step을 2로 설정해놨기 때문에 1,3,5,7,9 순으로 숫자가 증가되는 모습을 보인다.
시간 정보 입력
<input type="month|week|date|time|datetime-local"> 달, 주, 날짜, 시간, 로컬날짜시간을 입력받을 수 있다.
<input type="color"> 색을 입력할 수 있는 컬러 다이얼로그를 보여준다. HTML5에서는 #rrggbb의 형식으로 전송된다. 빨강, 초록, 파랑의 농도를 표기하며 각 원소 색은 8비트 범위의 16진수로 표기한다. 예를 들면 #ff0000은 빨간색을 의미한다.
파일 업로드
<input type="file"> 사용자가 기기의 저장소에서 파일을 선택하여 파일을 업로드 할 수 있도록 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- file타입의 경우 file의 용량이 클 수 있기 때문에 form의 method를 post로 한다. -->
<form action="" method="post" enctype="multipart/form-data">
<!-- accept는 특정파일을 지정할 수 있다. multiple의 경우 파일을 여러개 선택할 수 있도록 한다. -->
<input type="file" name="file" id="file" accept=".jpg" multiple>
<button>전송</button>
</form>
</body>
</html>
accept를 ".jpg"로 지정해놔서 입력받을 수 있는 유형의 확장자가 jpg(jpeg)로 설정되었다.
그룹화 하기
<fieldset><legend>그룹명</legend></fieldset> 폼 요소 항목이 많아서 그룹화를 하고싶을 때 사용하는 방법으로 그룹명이 적힌 박스로 묶는다.
