입력 형식
이 장에서의 입력 형식을 설명 <input> 요소.
입력 유형 : 텍스트
<input type="text"> 텍스트 입력을위한 하나의 라인 입력 필드를 정의한다 :
예
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form> »그것을 자신을 시도 이것은 HTML 코드가 위의 브라우저에 표시되는 방법이다 :
이름:
성:
입력 유형 : 비밀번호
<input type="password"> 암호 필드를 정의한다 :
예
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form> »그것을 자신을 시도 이것은 HTML 코드가 위의 브라우저에 표시되는 방법이다 :
사용자 이름:
사용자 암호:
암호 필드의 문자는 마스킹 (shown as asterisks or circles) .
입력 유형 : 제출
<input type="submit"> 형태 처리기에 입력 양식을 제출하기위한 버튼을 정의한다.
폼 처리기는 일반적으로 입력 데이터를 처리하는 스크립트 서버 페이지이다.
양식 처리기는 양식의 작업 특성에 지정된 :
예
<form action="action_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" value="Submit">
</form> »그것을 자신을 시도 이것은 HTML 코드가 위의 브라우저에 표시되는 방법이다 :
이름:
성:
당신이 제출 버튼의 value 속성을 생략하면, 버튼을 기본 텍스트를 얻을 것이다 :
예
<form action="action_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">
</form> »그것을 자신을 시도 입력 유형 : radio
<input type="radio"> 정의 radio 버튼.
Radio 버튼은 사용자가 선택의 제한된 수의 ONLY ONE 선택할 수 있습니다 :
예
<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
</form> »그것을 자신을 시도 이것은 HTML 코드가 위의 브라우저에 표시되는 방법이다 :
남성
여자
다른
입력 유형 : checkbox
<input type="checkbox"> 정의 checkbox .
Checkboxes 사용자가 선택의 제한된 수의 0 개 이상의 옵션을 선택할 수 있습니다.
예
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form> »그것을 자신을 시도 이것은 HTML 코드가 위의 브라우저에 표시되는 방법이다 :
나는 자전거를
나는 차를 가지고
입력 유형 : button
<input type="button"> 정의 button :
이것은 HTML 코드가 위의 브라우저에 표시되는 방법이다 :
HTML5의 Input 유형
HTML5는 몇 가지 새로운 추가 input 유형 :
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Input 하지 오래된 웹 브라우저에서 지원되는 유형은로 작동합니다 input 텍스트를 입력합니다.
Input 유형 : number
<input type="number"> 숫자 값을 포함해야 입력 필드에 사용된다.
당신은 숫자에 제한을 설정할 수 있습니다.
브라우저 지원에 따라 제한이 입력 필드에 적용 할 수 있습니다.
예
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form> »그것을 자신을 시도 Input 제한
여기에 몇 가지 일반적인 목록입니다 input 제한 (some are new in HTML5) :
| 속성 | 기술 |
|---|---|
| disabled | 입력 필드를 사용하지 않도록 지정 |
| max | 입력 필드에 대한 최대 값을 지정 |
| >maxlength | 입력 필드에 문자의 최대 수를 지정합니다 |
| min | 입력 필드의 최소치를 지정 |
| pattern | 에 대한 입력 값을 검사하는 정규 표현식을 지정합니다 |
| readonly | 지정 입력 필드만을 판독된다 (cannot be changed) |
| required | 입력 필드가 필요하다고 지정 (must be filled out) |
| size | 폭 지정 (in characters) 입력 필드를 |
| step | 입력 필드의 유효한 숫자 간격을 지정합니다 |
| value | 입력 필드의 기본 값을 지정합니다 |
당신은에 대한 자세한 내용은 것입니다 input 다음 장에서 제한.
예
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form> »그것을 자신을 시도 Input 유형 : date
<input type="date"> 날짜를 포함해야 입력 필드에 사용된다.
브라우저 지원에 따라, 날짜 선택기는 입력 필드에 표시 할 수 있습니다.
당신은에 제한을 추가 할 수 있습니다 input :
예
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form> »그것을 자신을 시도 Input 유형 : 색
<input type="color"> 색을 포함해야 입력 필드에 사용된다.
브라우저 지원에 따라 색상 선택기는 입력 필드에 표시 할 수 있습니다.
Input 유형 : 범위
<input type="range"> 범위 내의 값을 포함해야 입력 필드에 사용된다.
브라우저의 지원에 따라, 입력 필드는 슬라이더 컨트롤로서 디스플레이 될 수있다.
당신이 사용할 수있는 following 최소, 최대, 단계, 값 : 제한을 지정하는 속성.
Input 유형 : month
<input type="month"> 사용자가 월 및 연도를 선택할 수 있습니다.
브라우저 지원에 따라, 날짜 선택기는 입력 필드에 표시 할 수 있습니다.
Input 유형 : week
<input type="week"> 사용자가 주 및 연도를 선택 할 수 있습니다.
브라우저 지원에 따라, 날짜 선택기는 입력 필드에 표시 할 수 있습니다.
Input 유형 : time
<input type="time"> 사용자가 선택할 수 있도록 시간 (no time zone) .
브라우저 지원에 따라, 시간 선택기는 입력 필드에 표시 할 수 있습니다.
Input 유형 : datetime
<input type="datetime"> 사용자가 일시 선택할 수있다 (with time zone) .
 | 입력 유형 날짜는 HTML 표준에서 제거됩니다. 대신 날짜 로컬 사용합니다. |
|---|
입력 유형 : 날짜 로컬
<input type="datetime-local"> 사용자가 일시 선택할 수있다 (no time zone) .
브라우저 지원에 따라, 날짜 선택기는 입력 필드에 표시 할 수 있습니다.
예
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form> »그것을 자신을 시도 입력 유형 : 이메일
<input type="email"> 이메일 주소를 포함해야 입력 필드에 사용된다.
제출 된 경우 브라우저 지원에 따라 전자 메일 주소가 자동으로 검증 할 수 있습니다.
일부 스마트 폰은 이메일 유형을 인식하고, 추가 ".com" 이메일 입력에 맞게 키보드.
입력 유형 : 검색
<input type="search"> 검색 필드에 사용되는 (a search field behaves like a regular text field) .
입력 유형 : 전화
<input type="tel"> 전화 번호를 포함해야 입력 필드에 사용된다.
텔 유형은 현재 사파리 8에서 지원됩니다.
입력 유형 : 홈페이지
<input type="url"> URL 주소를 포함해야합니다 입력 필드에 사용됩니다.
제출 된 경우 브라우저 지원에 따라 URL 필드가 자동으로 검증 할 수 있습니다.
일부 스마트 폰은 URL 유형을 인식하고, 추가 ".com" URL 입력에 맞게 키보드.