HTML 입력양식 (2) 타입
type
텍스트 입력 - text
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>텍스트 입력</h1> <form> 제목 : <input type="text" name="title"> </form> </body> </html> |
▶<input> 태그의 type 속성값을 “text"로 설정하면, 사용자로부터 한 줄의 텍스트를 입력받을 수 있다.
비밀번호 입력 - password
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>비밀번호 입력</h1> <form> ID : <input type="text" name="username"><br/> pw : <input type="password" name="password"> </form> </body> </html> |
▶<input> 태그의 type 속성값을 “password"로 설정하면, 사용자로부터 비밀번호를 입력받을 수 있다.
비밀번호를 입력받기 때문에 화면에는 입력받은 문자나 숫자 대신 별표(*)나 작은 원 모양(•)이 표시된다.
전송 버튼 - submit
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>전송버튼</h1> <form> 사용자명 : <input type="text" name="username"><br/> <input type="submit" value="전송"> </form> </body> </html> |
▶<input> 태그의 type 속성값을 “submit"으로 설정하면, 사용자로부터 입력받은 데이터(data)를 서버의 폼 핸들러로 제출하는 버튼이 된다.
재설정 버튼 - reset
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>재설정</h1> <form> 사용자명 : <input type="text" name="username"><br/> <input type="reset" value="재설정"> </form> </body> </html> |
▶<input> 태그의 type 속성값을 “reset"으로 설정하면, 사용자가 입력한 값이 초기 값으로 재설정하는 버튼이 된다.
이미지 버튼 - image
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>이미지</h1> <form> 제목 : <input type="text" name="username"><br/> <input type="image" src="yul.png"> </form> </body> </html> |
▶<input> 태그의 type 속성값을 “image"으로 설정하면, 전송버튼(Submit Button)의 역할을 하면서 이미지로 출력되는 버튼이 된다.
일반 버튼 - button
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>일반 버튼</h1> <form> <input type="button" onclick="alert('Hello World!')" value="Click"> </form> </body> </html> |
▶<input> 태그의 type 속성값을 “button"으로 설정하면, 일반적인 버튼이 된다.
라디오 버튼 - radio
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>라디오</h1> <form> <input type="radio" name="fruit" value="apple" checked> 사과 <input type="radio" name="fruit" value="banana"> 바나나 <input type="radio" name="fruit" value="orange"> 오렌지 <input type="radio" name="fruit" value="strawberry"> 딸기 </form> </body> </html> |
▶<input> 태그의 type 속성값을 “radio"로 설정하면, 사용자로부터 여러 개의 옵션(option) 중에서 단 하나의 옵션만을 입력받을 수 있다. 이때 서버로 정확한 입력을 전송하기 위해서는 모든 input 요소의 name 속성이 같아야 한다.
체크박스 - checkbox
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>체크박스</h1> <form> <input type="checkbox" name="fruit" value="apple" checked> 사과 <input type="checkbox" name="fruit" value="banana"> 바나나 <input type="checkbox" name="fruit" value="orange"> 오렌지 <input type="checkbox" name="fruit" value="strawberry"> 딸기 </form> </body> </html> |
▶<input> 태그의 type 속성값을 “checkbox"로 설정하면, 사용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있다. 체크박스는 라디오 버튼과는 달리 여러 개의 옵션을 한 번에 입력받을 수 있다. 이때 서버로 정확한 입력을 전송하기 위해서는 모든 input 요소의 name 속성이 같아야 한다.
파일 선택 - file
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>파일선택</h1> <form> <input type="file" name="imageFile" accept="image/*"> </form> </body> </html> |
▶<input> 태그의 type 속성값을 “file"로 설정하면, 파일을 전송할 수 있다.
숫자 입력(number)
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>숫자 입력</h1> <form> <input type="number" name="num" min="1" max="100"> </form> </body> </html> |
▶<input> 태그의 type 속성값을 “number"로 설정하면, input 요소는 사용자가 숫자를 입력할 수 있도록 해준다.
number 타입이 일반 text 타입과 다른 점은 입력 필드 우측에 숫자의 크기를 조절할 수 있는 상하 버튼이 생기는 점이다.
min 속성과 max 속성을 이용하여 숫자 선택에 제한값을 설정할 수도 있다.
입력 범위 지정(range)
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>입력범위지정</h1> <form> 0 <input type="range" name="favnum" min="1" max="9">9 </form> </body> </html> |
▶<input> 태그의 type 속성값을 “range"로 설정하면, input 요소는 사용자가 일정 범위 안의 값만을 입력할 수 있도록 해준다. 브라우저 지원 여부에 따라 값을 선택하기 위한 수평 조절바를 보여줍니다.
색상 입력(color)
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>색상입력</h1> <form> <input type="color" name="color" value="#ff0001"> </form> </body> </html> |
▶<input> 태그의 type 속성값을 “color"로 설정하면, input 요소는 사용자가 색상을 입력할 수 있도록 해준다.
선택된 색상은 #을 제외한 6자리의 16진수 색상값으로 전송된다. 브라우저 지원 여부에 따라 색상을 선택하기 위한 도구를 보여준다.
날짜 입력(date)
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>날짜입력</h1> <form> <input type="date" name="day1"> </form> </body> </html> |
▶<input> 태그의 type 속성값을 “date"로 설정하면, input 요소는 사용자가 날짜를 입력할 수 있도록 해준다.
날짜를 선택하기 위한 캘린더를 보여준다.
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>날짜입력</h1> <form> <input type="date" name="day2" min="1970-01-01" max="2023-12-31"> </form> </body> </html> |
▶ min과 max 속성을 사용하여 날짜 선택에 제한값을 설정할 수도 있다.
시간 입력(time)
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>시간입력</h1> <form> <input type="time" name="time" > </form> </body> </html> |
▶<input> 태그의 type 속성값을 “time"로 설정하면, input 요소는 사용자가 시간을 입력할 수 있도록 해준다.
날짜와 시간 입력(datetime-local)
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>날짜와 시간입력</h1> <form> <input type="datetime-local" name="time" > </form> </body> </html> |
▶<input> 태그의 type 속성값을 “datetime-local"로 설정하면, input 요소는 사용자가 날짜와 시간을 입력할 수 있도록 해준다.
연도와 월 입력(month)
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>연도와 월 입력</h1> <form> <input type="month" name="month" > </form> </body> </html> |
▶<input> 태그의 type 속성값을 “month"로 설정하면, input 요소는 사용자가 연도와 월을 입력할 수 있도록 해준다.
연도와 주 입력(week)
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>연도와 주 입력</h1> <form> <input type="week" name="week" > </form> </body> </html> |
▶<input> 태그의 type 속성값을 “week"로 설정하면, input 요소는 사용자가 연도와 몇 번째 주인지를 입력할 수 있도록 해준다.
이메일 입력(email)
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>이메일입력</h1> <form> <input type="email" name="email" > </form> </body> </html> |
▶<input> 태그의 type 속성값을 “email"로 설정하면, input 요소는 사용자가 email 주소를 입력할 수 있도록 해준다.
URL 주소 입력(url)
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>URL 주소입력</h1> <form> <input type="url" name="url" > </form> </body> </html> |
▶<input> 태그의 type 속성값을 “url"로 설정하면, input 요소는 사용자가 URL 주소를 입력할 수 있도록 해준다.
전화번호 입력(tel)
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>전화번호입력</h1> <form> <input type="tel" name="tel" > </form> </body> </html> |
▶<input> 태그의 type 속성값을 “tel"로 설정하면, input 요소는 사용자가 전화번호를 입력할 수 있도록 해준다.
검색어 입력(search)
| <html> <head> <title>입력요소타입</title> </head> <body> <h1>검색어입력</h1> <form> <input type="search" name="search" > </form> </body> </html> |
▶<input> 태그의 type 속성값을 “search"로 설정하면, input 요소는 사용자가 검색어를 입력할 수 있도록 해준다. 이러한 검색 필드는 보통의 텍스트 필드(text field)와 동일하게 동작한다.
search 타입이 일반 text 타입과 다른 점은 입력 필드에 검색어를 입력하면, 입력 필드 우측에 입력된 검색어를 바로 삭제할 수 있는 엑스(X) 표시가 생기는 점이다.