일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- Virtual Box
- html input
- ubuntu
- 아두이노 와이파이
- vm
- Arduino
- Arduino pin
- 웹 프로그래밍
- mysql api
- Raspberry Pi
- web
- Codility
- 아두이노 프로미니
- Arduino pin map
- MySQL
- 아두이노 wifi
- database
- 알고리즘
- 라즈베리파이
- 아두이노 핀
- 아두이노
- HTML
- 아두이노 핀 맵
- wifi멀티탭
- 데이터베이스
- 아두이노 pro mini
- mysql c
- 코딜리티
- 아두이노 핀맵
- Mysql c API
- Today
- Total
offfff
HTML Input Types 본문
HTML Input Types
<input> element의 다른 여러 종류를 알아본다.
Input Type Text
<input type="text"> 는 한 줄 짜리 텍스트 입력 칸을 정의한다.
<!DOCTYPE html>
<html>
<body>
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
</body>
</html>
위 코드는 아래와 같이 표시된다.
HTML Input Password
<input type="password">는 패스워드 입력 칸을 정의한다.
이곳에 입력하면 문자를 볼 수 없게 기호(* 혹은 ●)로 바꿔준다.
<!DOCTYPE html>
<html>
<body>
<form>
User name:<br>
<input type="text" name="username"><br>
User Password:<br>
<input type="password" name="pswd">
</form>
</body>
</html>
실행결과는 아래와 같다.
Input Type Submit
<input type="submit">은 form-handler로 데이터를 제출하는 버튼을 정의한다.
form-handler는 보통 입력한 데이터를 처리하는 스크립트로 된 서버 페이지이다.
form-handler는 action 속성을 통해 정할 수 있다.
<!DOCTYPE html>
<html>
<body>
<form action="aciton_page.php">
User name:<br>
<input type="text" name="username"><br>
User Password:<br>
<input type="password" name="pswd"><br><br>
<input type="submit" value="OK">
</form>
</body>
</html>
submit 버튼에서 value 속성을 생략하면 기본 텍스트로 버튼이 표시된다.
value="OK"
기본 값
Input Types Reset
<input type="reset">은 리셋 버튼을 정의한다.
리셋버튼은 form에 입력된 값들을 텍스트의 value 속성 값으로 초기화 해준다.
<!DOCTYPE html>
<html>
<body>
<form action="aciton_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
실행결과는 아래와 같다.
각 텍스트 입력 칸의 값을 바꾸고 초기화 버튼을 눌러보자.
Input Type Radio
<input type="radio"> 는 라디오 버튼을 정의한다.
라디오버튼은 딱 하나만을 선택 가능한 선택 버튼이다.
<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br>
</form>
</body>
</html>
실행결과는 아래와 같다.
Male에 checked 속성이 있어 미리 선택되었다는 것을 알 수 있다.
Input Types Checkbox
<input type="checkbox">는 체크박스를 정의한다.
체크박스는 중복선택이나 하나도 선택하지 않는게 가능하다.
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" name="vehicle1" value="car"> 차<br>
<input type="checkbox" name="vehicle2" value="motorcycle"> 오토바이<br>
<input type="checkbox" name="vehicle3" value="bike"> 자전거<br>
<input type="checkbox" name="vehicle4" value="other"> 기타<br>
</form>
</body>
</html>
실행 결과는 아래와 같다.
Input Types Button
<input type="button">은 버튼을 정의한다.
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert('Hello world!')" value="Click Me!">
</body>
</html>
실행결과는 아래와 같다.
HTML5 Input Types
HTML5에는 아래와 같은 새로운 input 타입들이 추가되었다.
- color
- date
- datetime
- datetime-local
- month
- number
- range
- tel
- time
- url
- week
새로운 타입들은 HTML5를 지원하지 않는 환경에서 <input type="text">와 같이 동작한다.
Input Type Number
<input type="number">는 숫자 입력칸을 정의한다.
입력받을 숫자의 범위도 조절할 수 있다.
<!DOCTYPE html>
<html>
<body>
<form>
Quantity(1~5):
<input type="number" name="quantity" min="1" max="5">
</form>
</body>
</html>
Input Restrictions
input의 속성으로 아래와 같은 것들이 있다. 다음 장에서 더 자세히 알아본다.
속성 | 설명 |
disabled |
입력 칸을 사용하지 못하게 할 때 사용 |
max |
숫자 입력의 최대 값을 제한할 때 사용 |
maxlength |
문자열 입력의 최대 길이를 제한할 때 사용 |
min |
숫자 입력의 최소 값을 제한할 때 사용 |
pattern |
입력 값의 정규식을 체크할 때 사용 |
readonly |
입력 칸을 읽기 전용 값으로 고정(내용 수정 불가능) |
required |
꼭 입력해야 하는 칸에 이 속성을 적용한다. |
size |
입력 칸의 폭을 정의(값은 문자열 개수로 취급한다) |
step |
숫자 입력 시, 단위를 정의한다(10씩 증가 등...) |
value |
입력 칸에 미리 넣어놓을 값을 정의한다. |
Input Type Date
<input type="date">는 날짜를 입력해야하는 입력 칸에 사용된다.
브라우저 지원 여부에 따라, 달력이 나오는 경우도 있다.
<html>
<body>
<form>
Birthday:
<input type="date" name="bday">
</form>
</body>
</html>
아래와 같이 날짜를 제한할 수도 있다.
<html>
<body>
<form>
1980-01-01 이전의 날짜를 입력:
<input type="date" name="bday" max="1979-12-31"><br>
2000-01-01 이후의 날짜를 입력:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
</body>
</html>
Input Type Color
<input type="Color">는 색상을 지정해야하는 입력 칸을 정의할 때 사용한다.
<!DOCTYPE html>
<html>
<body>
<form>
색상을 선택하세요:
<input type="color" name="favorite">
</form>
</body>
</html>
<input type="range">는 범위안에서 값을 선택하는 입력을 정의한다.
min, max, step, value 등의 속성을 사용할 수 있다.
<!DOCTYPE html>
<html>
<body>
<form>
<input type="range" name="points" min="0" max="10">
</form>
</body>
</html>
실행결과는 아래와 같다.
Input Type Month
<input type="month"> 는 년도와 월을 선택하는 입력을 정의한다.
브라우저 지원 여부에 따라, 달력을 표시해 주기도 한다.
<!DOCTYPE html>
<html>
<body>
<form>
Birthday(month and year):
<input type="month" name="bdaymonth">
</form>
</body>
</html>
실행결과는 아래와 같다
Input Type Week
<input type="week">는 년도와 주를 선택할 수 있는 입력을 정의한다.
브라우저 지원 여부에 따라, 달력을 표시해 주기도 한다.
<!DOCTYPE html>
<html>
<body>
<form>
Select a week:
<input type="week" name="week_year">
</form>
</body>
</html>
실행결과는 아래와 같다.
Input Type Datetime-local
<input type="datetime-local">는 타임존과 상관 없는 날짜와 시간 입력칸을 만든다.
<!DOCTYPE html>
<html>
<body>
<form>
Birthday(date and time):
<input type="datetime-local" name="bdaytime">
</form>
</body>
</html>
실행결과는 아래와 같다.
Birthday(date and time):
Input Type Time
<input type="time">은 시간을 선택할 수 있는 입력을 정의한다.
<!DOCTYPE html>
<html>
<body>
<form>
Select a time:
<input type="time" name="user_time">
</form>
</body>
</html>
실행결과는 아래와 같다.
Select a time:
Input Type Email
<input type="email">은 이메일 주소를 입력받을 때 사용한다.
브라우저에 따라 유효한 메일 주소인지 submit 시에 확인한다.
<!DOCTYPE html>
<html>
<body>
<form>
E-mail:
<input type="email" name="email">
</form>
</body>
</html>
실행결과는 아래와 같다.
Input Type Search
<input type="search">는 검색 입력창을 정의한다.
<!DOCTYPE html>
<html>
<body>
<form>
Search Google:
<input type="search" name="googlesearch">
<input type="submit">
</form>
</body>
</html>
실행결과는 아래와 같다.
Input Type Tel
<input type="tel">은 전화번호를 입력받는 칸을 정의할 때 사용한다.
사파리에서만 지원하는 속성이다.
<!DOCTYPE html>
<html>
<body>
<form>
Search Google:
<input type="tel" name="usrtel">
<input type="submit">
</form>
</body>
</html>
Input Type Url
<input type="url">은 URL 주소를 입력하는 칸을 정의할 때 사용한다.
브라우저에 따라 유효한 주소인지 submit 시에 체크하기도 한다.
<!DOCTYPE html>
<html>
<body>
<form>
Add your hompage:
<input type="url" name="homepage">
</form>
</body>
</html>
아래 링크를 참조하여 수정 및 번역 함
http://www.w3schools.com/html/html_form_input_types.asp
'프로그래밍' 카테고리의 다른 글
라즈베리파이 시작하기 (0) | 2016.09.30 |
---|---|
HTML Input Attribute (0) | 2016.09.21 |
HTML Form Elements (0) | 2016.09.19 |
HTML Forms (0) | 2016.09.18 |
HTML XHTML (0) | 2016.09.17 |