offfff

HTML Input Types 본문

프로그래밍

HTML Input Types

offfff 2016. 9. 20. 09:00

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>


위 코드는 아래와 같이 표시된다.


First name:

Last name:




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>


실행결과는 아래와 같다.


User name:

User Password:




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>


실행결과는 아래와 같다.

각 텍스트 입력 칸의 값을 바꾸고 초기화 버튼을 눌러보자.


First name:

Last name:





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 속성이 있어 미리 선택되었다는 것을 알 수 있다.


Male
Female
Other




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

- email

- 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>


실행결과는 아래와 같다.

Quantity(1~5):



Input Restrictions


input의 속성으로 아래와 같은 것들이 있다. 다음 장에서 더 자세히 알아본다.


 속성

 설명 

 disabled

 입력 칸을 사용하지 못하게 할 때 사용                         

 max

 숫자 입력의 최대 값을 제한할 때 사용                         

 maxlength

 문자열 입력의 최대 길이를 제한할 때 사용                   

 min

 숫자 입력의 최소 값을 제한할 때 사용                        

 pattern

 입력 값의 정규식을 체크할 때 사용

 readonly

 입력 칸을 읽기 전용 값으로 고정(내용 수정 불가능)        

 required

 꼭 입력해야 하는 칸에 이 속성을 적용한다.

 size

 입력 칸의 폭을 정의(값은 문자열 개수로 취급한다)         

 step

 숫자 입력 시, 단위를 정의한다(10씩 증가 등...)               

 value

 입력 칸에 미리 넣어놓을 값을 정의한다.




Input Type Date


<input type="date">는 날짜를 입력해야하는 입력 칸에 사용된다.

브라우저 지원 여부에 따라, 달력이 나오는 경우도 있다.


<!DOCTYPE html>

<html>

<body>


<form>

Birthday:

<input type="date" name="bday">

</form>


</body>

</html>


실행결과는 아래와 같다.

Birthday:
아래와 같이 날짜를 제한할 수도 있다.

<!DOCTYPE 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


<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>


실행결과는 아래와 같다


Birthday(month and year):



Input Type Week


<input type="week">는 년도와 주를 선택할 수 있는 입력을 정의한다.

브라우저 지원 여부에 따라, 달력을 표시해 주기도 한다.


<!DOCTYPE html>

<html>

<body>


<form>

Select a week:

<input type="week" name="week_year">

</form>


</body>

</html>


실행결과는 아래와 같다.


Select a week:



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>


실행결과는 아래와 같다.


E-mail:



Input Type Search


<input type="search">는 검색 입력창을 정의한다.


<!DOCTYPE html>

<html>

<body>


<form>

Search Google:

<input type="search" name="googlesearch">

<input type="submit">

</form>


</body>

</html>


실행결과는 아래와 같다.


Search Google:



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
'프로그래밍' Related Articles more