브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더
input
input 요소를 사용하여 사용자로부터 입력을 받음
input 요소
텍스트 입력(text)
한 줄의 텍스트 입력 받음
<form action="/examples/media/request.php">
검색할 내용을 입력하세요 :
<input type="text" name="search">
</form>
비밀번호 입력(password)
화면에는 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시
<form>
사용자 : <br><input type="text" name="username"><br>
비밀번호 : <br><input type="password" name="password">
</form>
라디오 버튼(radio)
사용자로부터 여러 개의 옵션 중에서 단 하나의 옵션만을 입력받을 수 있음
이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성 동일
<form>
<input type="radio" name="lecture" value="html" checked> HTML <br>
<input type="radio" name="lecture" value="css"> CSS <br>
<input type="radio" name="lecture" value="java"> JAVA <br>
<input type="radio" name="lecture" value="cpp"> C++
</form>
체크박스(checkbox)
용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있음
이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성 동일
<form>
<input type="checkbox" name="lecture" value="html" checked> HTML <br>
<input type="checkbox" name="lecture" value="css"> CSS <br>
<input type="checkbox" name="lecture" value="java"> JAVA <br>
<input type="checkbox" name="lecture" value="cpp" disabled> C++
</form>
파일 선택(file)
<form>
<input type="file" name="upload_file" accept="image/*">
</form>accept 속성 : 입력받을 수 있는 파일의 확장자 및 종류를 명시
선택 입력(select)
여러 개의 옵션이 드롭다운 리스트로 나타나며 그중에서 단 하나의 옵션만을 입력받을 수 있음
<select name="fruit">
<option value="apple"> 사과
<option value="orange" selected> 귤
<option value="strawberry"> 딸기
<option value="peach"> 복숭아
</select>option 요소 : 드롭다운 리스트에서 선택할 수 있는 각각의 옵션을 명시
문장 입력(textarea)
여러 줄의 텍스트
<textarea name="message" rows="5" cols="30">
여기에 적으세요.
</textarea>rows 속성과 cols 속성 : 크기 지정
버튼 입력(button)
<button type="button" onclick="alert('버튼을 클릭하셨군요!')">
버튼을 눌러주세요.
</button>
전송 버튼(submit)
사용자로부터 입력받은 데이터(data)를 서버의 폼 핸들러로 제출하는 버튼
action 속성 : 폼 핸들러의 주소 명시
<form action="/examples/media/request.php">
어릴 때 자신의 별명을 적어주세요 : <br>
<input type="text" name="nickname" value="별명"><br><br>
<input type="submit" value="전송">
</form>
필드셋(fieldset)
form 요소와 관련된 데이터들을 하나로 묶어주는 역할
legend 요소 : fieldset 요소 안에서만 사용할 수 있으며, fieldset 요소의 제목
<form action="/examples/media/request.php">
<fieldset>
<legend>입력 양식</legend>
이름 : <br>
<input type="text" name="username"><br>
이메일 : <br>
<input type="text" name="email"><br><br>
<input type="submit" value="전송">
</fieldset>
</form>
datalist
input 요소에 대해 미리 정의된 옵션 리스트를 명시
input 요소의 list 속성값이 datalist 요소의 id 속성값과 반드시 일치
<form action="/examples/media/request.php">
<input list="lectures" name="lecture">
<datalist id="lectures">
<option value="HTML">
<option value="CSS">
<option value="JAVA">
<option value="C++">
</datalist>
<input type="submit" value="전송">
</form>
Keygen
사용자가 인증할 수 있는 안전한 방법을 제공
사용자가 입력한 데이터를 암호화하여 서버로 전송하고 이때 생성된 키로 서버는 해당 사용자의 인증을 수행
<form action="/examples/media/request.php">
사용자 : <br>
<input type="text" name="username"><br>
암호화방법 : <br>
<keygen name="security"><br>
</form>
output
스크립트(script) 등으로 실행된 계산의 결과를 바로 표시해주는 요소
for 속성을 사용하여 해당 결과에 영향을 줄 수 있는 HTML 문서 내의 요소를 명시
for 속성의 속성값에는 해당 요소의 id 속성값을 공백으로 나열
<form action="/examples/media/request.php"
oninput="total.value=parseInt(value01.value)/parseInt(value02.value)">
<input type="number" id="value01" name="input01" value="20">
/
( 0
<input type="range" id="value02" name="input02" value="50" min="0" max="100">
100 )
=
<output name="total" for="value01 value02"></output><br><br>
</form>
숫자 입력(number)
사용자가 숫자를 입력
입력 필드 우측에 숫자의 크기를 조절할 수 있는 상하 버튼 생성 (일반 텍스트 타입과 차별점)
브라우저의 지원 여부에 따라 min 속성과 max 속성을 이용하여 숫자 선택에 제한값을 설정 가능
<input type="number" name="favnum" min="1" max="9">
입력 범위 지정(range)
사용자가 일정 범위 안의 값만을 입력
브라우저 지원 여부에 따라 값을 선택하기 위한 수평 조절바 보기 가능
0 <input type="range" name="favnum" min="1" max="9"> 9
색상 입력(color)
사용자가 색상을 입력
브라우저 지원 여부에 따라 색상을 선택하기 위한 도구 보기 가능
<input type="color" name="favcolor" value="#CC6600">
날짜 입력(date)
사용자가 날짜를 입력
브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더 보기 가능
, min과 max 속성을 사용하여 날짜 선택에 제한값을 설정 가능
<input type="date" name="startday">
<input type="date" name="theday" min="1977-01-01" max="2020-12-31">
시간 입력(time)
사용자가 시간을 입력
브라우저 지원 여부에 따라 시간을 선택하기 위한 도구 보기 가능
<input type="time" name="birthtime">
날짜와 시간 입력(datetime-local)
사용자가 날짜와 시간을 입력
브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더와 시간을 선택하기 위한 도구 보기 가능
<input type="datetime-local" name="starttime">
연도와 월 입력(month)
사용자가 연도와 월을 입력
브라우저 지원 여부에 따라 연도와 월을 선택하기 위한 캘린더 보기 가능
<input type="month" name="birthmonth">
연도와 주 입력(week)
사용자가 연도와 몇 번째 주인지를 입력
브라우저 지원 여부에 따라 연도와 주를 선택하기 위한 캘린더 보기 가능
<input type="week" name="nthweek">
이메일 입력(email)
사용자가 email 주소를 입력
브라우저 지원 여부에 따라 전송할 때 입력한 email 주소가 유효한 email 주소인지 자동으로 검사
<input type="email" name="email">
url 주소 입력
input 요소는 사용자가 URL 주소를 입력
브라우저 지원 여부에 따라 전송할 때 입력한 URL 주소가 유효한 URL 주소인지 자동으로 검사
<input type="url" name="url">
전화번호 입력(tel)
사용자가 전화번호를 입력
사파리에서만 동작
<input type="tel" name="tel">
검색어 입력(search)
사용자가 검색어를 입력
보통의 텍스트 필드(text field)와 동일하게 동작
입력 필드 우측에 입력된 검색어를 바로 삭제할 수 있는 엑스(X) 표시 생성 (텍스트와 차별점)
<input type="search" name="keyword">
input 요소의 속성
value 속성
input 요소의 입력 필드(input field)에 나타나는 초깃값을 설정
<form>
이름 : <br><input type="text" name="student_name"><br>
학번 : <br><input type="text" name="student_id"><br>
학과 : <br><input type="text" name="department" value="컴퓨터공학과"><br>
</form>
readonly 속성
사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정
전송 버튼(submit)을 누르면 초깃값이 서버로 전송
<form>
이름 : <br><input type="text" name="student_name"><br>
학번 : <br><input type="text" name="student_id"><br>
학과 : <br><input type="text" name="department" value="컴퓨터공학과" readonly><br>
</form>
disabled 속성
사용자가 입력 필드를 아예 사용할 수 없도록 설정
disabled 속성이 설정된 입력 필드는 사용할 수도 없고, 클릭할 수도 없음
송 버튼(submit)을 눌러도 초깃값이 서버로 전송되지 않음
<form>
이름 : <br><input type="text" name="student_name"><br>
학번 : <br><input type="text" name="student_id"><br>
학과 : <br><input type="text" name="department" value="컴퓨터공학과" disabled><br>
</form>
maxlength 속성
입력 필드에 입력할 수 있는 문자의 최대 길이(length)를 설정
<form>
이름 : <br><input type="text" name="student_name" value="홍길동" maxlength="10"><br>
학번 : <br><input type="text" name="student_id"><br>
</form>
size 속성
입력 필드에 보여지는 input 요소의 크기(size)를 설정
입력 필드가 한 번에 보여줄 수 있는 문자의 최대 개수만을 의미
입력될 수 있는 문자의 최대 길이는 maxlength 속성값에 따라 달라지며, size 속성과는 전혀 무관
<form>
이름 : <br><input type="text" name="student_name"><br>
학번 : <br><input type="text" name="student_id"><br>
학과 : <br><input type="text" name="department" value="컴퓨터공학과" readonly><br>
</form>
autocomplete 속성
form 요소나 input 요소에 입력된 정보를 저장할지 안 할지를 명시
이 속성의 속성값이 on으로 설정되면, 브라우저는 사용자가 입력하는 정보를 자동으로 저장
이 후에 입력되는 입력값을 저장된 정보를 바탕으로 자동 완성
- text, password, range, color, date, datetime-local, month, week, email, url, tel, search 타입에서만 사용 가능
<form action="/examples/media/request.php" autocomplete="on">
이름 : <input type="text" name="name"><br>
나이 : <input type="number" name="age" min="1" max="99" autocomplete="off"><br><br>
</form>
novalidate 속성
input 요소의 속성이 아닌 form 요소의 속성
입력한 정보(data)를 전송할 때 그 정보가 유효한지 아닌지를 검사하지 않았다는 것을 명시
자동으로 유효성 검사를 하는 input 타입에 이 속성을 사용하면 유효성 검사를 하지 않음
즉, 이 속성이 사용된 form 요소로 전달받은 정보(data)는 반드시 서버 측에서 따로 유효성 검사를 실시
<form action="/examples/media/request.php" novalidate>
여러분이 자주 들리는 사이트의 URL 주소를 입력해 주세요 :<br><br>
<input type="url" name="url">
</form>
autofocus 속성
웹 페이지가 로드 될 때, 속성이 적용된 input 요소에 자동으로 포커스
<form action="/examples/media/request.php">
사용자 : <input type="text" name="username"><br>
비밀번호 : <input type="password" name="password" autofocus><br><br>
</form>
form 속성
해당 input 요소의 위치에 상관없이 포함될 form 요소를 명시
포함할 form 요소의 id 속성값을 공백으로 연결
<form action="/examples/media/request.php" id="user">
사용자 : <input type="text" name="username"><br><br>
</form>
...
비밀번호 : <input type="password" name="password" form="user">
formaction 속성
전송할 때 정보가 전달될 서버 측 파일을 명시
form 요소의 action 속성을 덮어씀
이 속성을 사용하면 입력된 정보를 넘겨줄 서버 측 파일을 input 요소에서 바꿀 수 있음
submit 타입과 image 타입에서만 사용 가능
<form action="/examples/media/request.php">
사용자 : <input type="text" name="username"><br>
비밀번호 : <input type="password" name="password"><br><br>
<input type="submit" value="관리자 권한으로 전송" formaction="/examples/media/request_admin.php"><br>
</form>
formenctype 속성
입력한 정보를 전송할 때 암호화하는 방법을 명시
form 요소의 enctype 속성을 덮어씀
form 요소의 method 속성이 post일 때만 적용
submit 타입과 image 타입에서만 사용 가능
<form action="/examples/media/request_enctype.php" method="post">
사용자 이름을 입력해주세요 : <input type="text" name="username"><br><br>
<input type="submit" value="암호화하여 전송" formenctype="multipart/form-data"><br>
</form>
formmethod 속성
입력한 정보를 전송할 때 사용하는 http 메소드를 명시
form 요소의 method 속성을 덮어씀
submit 타입과 image 타입에서만 사용 가능
<form action="/examples/media/request.php" method="get">
사용자 이름을 입력해주세요 : <input type="text" name="username"><br><br>
<input type="submit" value="post 방식으로 전송" formmethod="post"><br>
</form>
formnovalidate 속성
입력한 정보(data)를 전송할 때 그 정보가 유효한지 아닌지를 검사하지 않았다는 것을 명시
form 요소의 novalidate 속성을 덮어씀
submit 타입에서만 사용 가능
<form action="/examples/media/request.php">
여러분이 자주 들리는 사이트의 URL 주소를 입력해 주세요 : <input type="url" name="url"><br><br>
<input type="submit" value="novalidate 방식으로 전송" formnovalidate><br>
</form>
formtarget 속성
입력한 정보(data)를 전송한 후, 그 결과로 받은 응답 페이지를 어디에 출력할지를 명시
form 요소의 target 속성을 덮어씀
submit 타입과 image 타입에서만 사용 가능
<form action="/examples/media/request.php">
사용자 이름을 입력해주세요 : <input type="text" name="username"><br><br>
<input type="submit" value="응답 화면을 새창에 표시" formtarget="_blank"><br>
</form>
height와 width 속성
<input>태그의 type 속성이 "image"일 경우에는 height 속성과 width 속성을 사용하여 이미지의 높이와 너비를 명시
image 타입에서만 사용 가능
이미지를 클릭하면 클릭한 곳의 x좌표와 y좌표가 x와 y라는 이름으로 같이 전송
<form action="/examples/media/request.php">
사용자 : <input type="text" name="username"><br>
비밀번호 : <input type="password" name="password" autofocus><br><br>
<input type="image" src="/examples/images/img_penguin.png" alt="전송" height="26" width="26">
그림을 클릭하시면 전송됩니다!
</form>
list 속성
해당 input 요소에 대한 미리 정의된 옵션 리스트를 설정하는 datalist 요소와 관련
input 요소의 list 속성값이 datalist 요소의 id 속성값과 일치해야만 연결
<form action="/examples/media/request.php">
<input list="lectures" name="lecture">
<datalist id="lectures">
<option value="HTML">
<option value="CSS">
</datalist>
</form>
min속성과 max 속성
input 요소에 입력할 수 있는 최솟값과 최댓값을 명시
- number, range, date, time, datetime-local, month, week 타입에서만 사용 가능
<form action="/examples/media/request.php">
<input type="date" name="theday" min="1977-01-01" max="2020-12-31"><br><br>
<input type="submit" value="전송">
</form>
multiple 속성
사용자가 input 요소에 값을 두 개 이상 입력하는 것을 허용
email 타입과 file 타입에서만 사용 가능
<form action="/examples/media/request.php">
<input type="file" name="uploadfile" multiple><br><br>
<input type="submit" value="전송">
</form>
pattern 속성
input 요소에 입력된 값을 검사하기 위한 정규 표현식 명시
정규 표현식 : 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴
- text, password, email, tel, url 타입에서만 사용 가능
<form action="/examples/media/request.php">
<input type="email" name="email"
pattern="[a-zA-Z0-9]+[@][a-zA-Z0-9]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*" title="이메일 양식">
</form>
placeholder 속성
input 요소에 입력되어야 할 값에 대한 힌트를 제공
해당 입력 필드에 포커스가 오게 되면 더 이상 표시되지 않음
- text, password, email, tel, url, search 타입에서만 사용 가능
<form action="/examples/media/request.php">
사용자 : <input type="text" name="username" placeholder="홍길동"><br>
비밀번호 : <input type="password" name="password" placeholder="1234"><br><br>
</form>
required 속성
반드시 입력되어야 할 필수 input 요소를 명시
이 속성이 설정된 모든 input 요소에 입력값이 존재해야만 서버로 전송 가능
<form action="/examples/media/request.php">
이름 : <input type="text" name="name" required> (이름은 반드시 입력해야 해요!)<br>
나이 : <input type="number" name="age" min="1" max="99"><br><br>
</form>
step 속성
input 요소에 입력할 수 있도록 허용된 숫자 간격을 명시
- number, range, date, time, datetime-local, month, week 타입에서만 사용 가능
<form action="/examples/media/request.php">
여러분이 가장 좋아하는 숫자는 몇인가요? (단, -30부터 30사이에서 5단위로 골라주세요!)<br><br>
<input type="number" name="favnum" min="-30" max="30" step="5"><br><br>
</form>
