수색…


소개

대화 형 웹 시스템의 핵심 구성 요소 인 입력 태그는 사용자가 특정 형식의 입력을 받도록 고안된 HTML 요소입니다. 다양한 유형의 입력 요소는 지정된 형식에 맞게 입력 된 데이터를 조절하고 암호 입력에 보안을 제공 할 수 있습니다.

통사론

  • <input type="" name="" value="">

매개 변수

매개 변수 세부
수업 입력 클래스를 나타냅니다.
신분증 입력 ID를 나타냅니다.
유형 표시 할 입력 컨트롤의 유형을 식별합니다. 허용되는 값은 hidden , text , tel , url , email , password , date , time , number , range , color , checkbox , radio , file , submit , image , resetbutton 입니다. 기본값하는 text 브라우저가 지정된 유형을 지원하지 않는 경우 지정되지 않은 경우 값이 유효하지 않은 경우, 또는.
이름 입력의 이름을 나타냅니다.
장애인 입력이 비활성화되어야 함을 나타내는 부울 값입니다. 비활성화 된 컨트롤은 편집 할 수 없으며 양식 제출시 보내지도 않고 포커스를받을 수 없습니다.
확인한 type 속성의 값이 라디오 또는 체크 박스 인 경우이 부울 속성의 존재는 컨트롤이 기본적으로 선택되었음을 나타냅니다. 그렇지 않으면 무시됩니다.
배수 HTML5 여러 파일 또는 값을 전달할 수 있음을 나타냅니다 ( fileemail 유형 입력에만 적용).
자리 표시 자 HTML5 컨트롤에 입력 할 수있는 것을 사용자에게 알려줍니다. 자리 표시 자 텍스트에는 캐리지 리턴이나 줄 바꿈이 없어야합니다.
자동 완성 HTML5 브라우저에서 컨트롤의 값을 자동으로 완료 할 수 있는지 여부를 나타냅니다.
읽기 전용 입력을 편집 할 수 없음을 나타내는 부울 값입니다. 읽기 전용 컨트롤은 양식 제출시 계속 보내지 만 포커스는받지 않습니다. HTML5 : type 속성의 값이 hidden , range , color , checkbox , radio , file 또는 button 설정된 경우이 속성은 무시됩니다.
필수 HTML5 양식 제출을 위해 값이 있어야하거나 요소를 확인해야 함을 나타냅니다.
대체 이미지가 표시되지 않는 경우 대체 텍스트.
자동 초점 페이지가로드 될 때 <input> 요소에 포커스가 있어야합니다.
<input> 요소의 값을 지정합니다.
단계 step 속성은 유효한 숫자 간격을 지정합니다. number , range , date , datetime-local , month , timeweek 입력 유형과 함께 작동합니다.

비고

다른 HTML5 void 요소와 마찬가지로 <input> 은 자동으로 닫히고 <input /> 으로 작성 될 수 있습니다. HTML5에는이 슬래시가 필요하지 않습니다.

다음은 HTML에서 유효한 입력 유형입니다.

5

다음은 HTML 5 표준의 일부로 새로 도입 된 입력 유형입니다. 일부 유형은 모든 웹 브라우저에서 지원되지 않습니다. 형식이 지원되지 않는 경우 입력 요소의 기본값은 text 유형입니다.

어떤 브라우저가 어떤 유형을 지원하는지 확인하려면 caniuse.com을 방문하십시오 .

확인란 및 라디오 버튼

개요

체크 박스와 라디오 버튼은 HTML 태그 인 <input> 사용하여 작성되며 HTML 태그의 동작은 HTML 사양에 정의되어 있습니다.

가장 간단한 체크 박스 또는 라디오 버튼은 각각 type 속성이 checkbox 또는 radio<input> 요소입니다.

<input type="checkbox">
<input type="radio">

하나의 독립형 체크 박스 요소는 예 또는 아니오와 같은 단일 바이너리 옵션에 사용됩니다. 확인란은 독립적이므로 사용자는 확인란 그룹에서 원하는만큼 선택 사항을 선택할 수 있습니다. 즉, 하나의 확인란을 선택해도 확인란 그룹의 다른 확인란이 선택 취소되지 않습니다 .

라디오 버튼은 일반적으로 그룹으로 표시됩니다 (다른 라디오 버튼과 그룹화되지 않은 경우 아마 그 대신 확인란을 사용해야 함). 해당 그룹 내의 모든 버튼에서 동일한 name 속성을 사용하여 식별됩니다. 라디오 버튼의 선택은 상호 배타적입니다 . 즉, 사용자는 라디오 버튼 그룹에서 하나의 선택 만 선택할 수 있습니다. 라디오 버튼이 선택되면, 이전에 체크 된 것과 같은 name 을 가진 다른 라디오 버튼이 선택 해제됩니다.

예:

<input type="radio" name="color" id="red" value="#F00">
<input type="radio" name="color" id="green" value="#0F0">
<input type="radio" name="color" id="blue" value="#00F">

보았을 때 라디오 버튼은 원 (체크되지 않음) 또는 채워진 원 (체크)으로 나타납니다. 확인란은 정사각형 (체크되지 않음) 또는 채워진 정사각형 (체크 표시)으로 나타납니다. 브라우저 및 운영 체제에 따라 사각형에 둥근 모서리가있는 경우가 있습니다.

속성

체크 박스와 라디오 버튼은 동작을 제어하기 위해 다음과 같은 많은 속성을 가지고 있습니다 :

value

다른 입력 요소와 마찬가지로 value 속성은 양식 제출 이벤트에서 버튼과 연결할 문자열 값을 지정합니다. 그러나 체크 박스와 라디오 버튼은 값을 생략 할 때 빈 값을 보내지 않고 제출 될 때 기본적으로 on 있다는 점에서 특별합니다. value 속성은 버튼의 모양에 반영되지 않습니다.

checked

checked 속성은 체크 박스 또는 라디오 버튼의 초기 상태를 지정합니다. 이는 부울 속성이며 생략 될 수 있습니다.

이들 각각은 유효한 라디오 버튼을 정의하는 유효한 방법입니다.

<input checked>
<input checked="">
<input checked="checked">
<input checked="ChEcKeD">

checked 속성이 없으면 checked 되지 않은 버튼에 대한 유일한 유효한 구문입니다.

<input type="radio">
<input type="checkbox">

<form> 리셋 할 때, 체크 박스와 라디오 버튼은 checked 속성의 상태로 되돌아갑니다.

접근성

레이블

단추에 컨텍스트를 부여하고 각 단추의 용도를 사용자에게 표시하려면 각 단추에 레이블이 있어야합니다. <label> 요소를 사용하여 버튼을 래핑 할 수 있습니다. 또한 레이블을 클릭 할 수있게하므로 해당 단추를 선택합니다.

예:

<label>
  <input type="radio" name="color" value="#F00">
  Red
</label>

for 속성이 버튼의 id 속성으로 설정된 <label> 요소를 사용하여

<input type="checkbox" name="color" value="#F00" id="red">
<label for="red">Red</label>

버튼 그룹

각 라디오 버튼은 그룹의 다른 라디오 버튼에 영향을주기 때문에 전체 라디오 버튼 그룹에 레이블 또는 컨텍스트를 제공하는 것이 일반적입니다.

전체 그룹에 레이블을 제공하려면 <fieldset> 요소에 <legend> 요소가 포함 된 라디오 단추를 포함해야합니다.

예:

<fieldset>
  <legend>Theme color:</legend>
  <p>
    <input type="radio" name="color" id="red" value="#F00">
    <label for="red">Red</label>
  </p>
  <p>
    <input type="radio" name="color" id="green" value="#0F0">
    <label for="green">Green</label>
  </p>
  <p>
    <input type="radio" name="color" id="blue" value="#00F">
    <label for="blue">Blue</label>
  </p>
</fieldset>

체크 박스는 관련된 체크 박스 그룹을 식별하는 필드 세트 및 범례와 함께 유사한 방식으로 그룹화 할 수도 있습니다. 그러나,이 상호 배타적이지 않기 때문에 체크 박스가 같은 이름을 공유 안된다는 점에 유의하십시오. 이렇게하면 양식에서 동일한 키에 대해 여러 값을 제출하게되며 모든 서버 측 언어가 동일한 방식으로이를 처리하지는 않습니다 (정의되지 않은 동작). 각 확인란에는 고유 한 이름이 있거나 대괄호 ( [] )를 사용하여 양식이 해당 키의 값 배열을 제출해야 함을 나타낼 수 있습니다. 어떤 방법을 선택 하느냐에 따라 양식 데이터를 클라이언트 측 또는 서버 측에서 처리 할 방법에 따라 달라집니다. 또한 브라우저 및 화면 판독기의 일부 조합은 필드 세트의 각 입력 필드 앞에 범례를 읽으므로 범례를 짧게 유지해야합니다.

숨겨진

<input type="hidden" name="inputName" value="inputValue">  

숨겨진 입력은 사용자에게 표시되지 않지만 양식이 제출되면 값은 서버로 전송됩니다.

암호

<input type="password" name="password">

값이 password 인 type 속성이있는 input 요소는 사용자가 입력 할 때 텍스트가 표시되지 않는다는 점을 제외하고는 입력 type=text 와 유사한 단일 행 텍스트 필드를 만듭니다.

<input type="password" name="password" placeholder="Password">

자리 표시 자 텍스트는 일반 텍스트로 표시되며 사용자가 입력을 시작하면 자동으로 덮어 씁니다.

샘플 비밀번호 입력 필드

참고 : 일부 브라우저 및 시스템은 암호 필드의 기본 동작을 수정하여 다음과 같이 짧은 시간 동안 가장 최근에 입력 한 문자를 표시합니다.

표시된 마지막 문자의 예

제출

<input type="submit" value="Submit">

제출 입력은 클릭 할 때 내부에있는 양식을 제출하는 단추를 작성합니다.

보다 쉽게 ​​스타일을 지정하거나 다른 요소를 포함 할 수있는 제출 버튼이 필요한 경우 <button> 요소를 사용할 수도 있습니다.

<button type="submit">
  <img src="submit-icon.jpg" /> Submit
</button>

파일

<input type="file" name="fileSubmission">

파일 입력을 통해 사용자는 로컬 파일 시스템에서 현재 페이지와 함께 사용할 파일을 선택할 수 있습니다. form 요소와 함께 사용하면 사용자가 파일을 서버에 업로드 할 수 있습니다 (자세한 내용은 파일 업로드 참조).

다음 예제에서는 사용자가 file 입력을 사용하여 file 시스템에서 파일을 선택하고 해당 파일을 upload_file.php 라는 서버의 스크립트에 업로드 할 수 있습니다.

<form action="upload_file.php" method="post" enctype="multipart/form-data">
    Select file to upload:
    <input type="file" name="fileSubmission" id="fileSubmission">
    <input type="submit" value="Upload your file" name="submit">
</form>

여러 파일

multiple 속성을 추가하면 사용자가 둘 이상의 파일을 선택할 수 있습니다.

<input type="file" name="fileSubmission" id="fileSubmission" multiple>

파일 수락

수락 특성은 사용자가 선택할 수있는 파일 형식을 지정합니다. 예 : .png , .gif , .jpeg .

<input type="file" name="fileSubmission" accept="image/x-png,image/gif,image/jpeg" />

입력 유효성 검사

HTML 입력 유효성 검증은 입력 요소의 특수 속성을 기반으로 브라우저가 자동으로 수행합니다. 자바 스크립트 입력 유효성 검사를 부분적으로 또는 완전히 대체 할 수 있습니다. 이러한 유형의 유효성 검사는 특수하게 조작 된 HTTP 요청을 통해 사용자가 우회하여 서버 측 입력 유효성 검사를 대체하지 않습니다. 유효성 검사는 양식을 제출할 때만 발생하므로 유효성을 검사하기 위해 모든 제한된 입력이 양식 안에 있어야합니다 (JavaScript를 사용하지 않는 한). 비활성화되거나 읽기 전용 인 입력은 유효성 검사를 트리거하지 않습니다.

email , url , tel , date 등의 새로운 입력 유형은 자동으로 유효성이 검사되며 사용자 정의 유효성 검사 제약 조건이 필요하지 않습니다.

5

필수

유효성 검사를 통과하려면 필드를 완료해야 함을 나타 내기 위해 required 속성을 사용하십시오.

<input required>

최소 / 최대 길이

길이 요구 사항을 표시하려면 minlengthmaxlength 속성을 사용하십시오. 대부분의 브라우저는 사용자가 상자에 최대 문자를 초과하여 입력하지 못하도록하여 제출을 시도하기 전에 항목이 유효하지 않게합니다.

<input minlength="3">
<input maxlength="15">
<input minlength="3" maxlength="15">

범위 지정

minmax 속성을 사용하여 number 또는 range 유형의 입력에 사용자가 입력 할 수있는 범위의 범위를 제한합니다.

Marks: <input type="number" size="6" name="marks" min="0" max="100" />
Subject Feedback: <input type="range" size="2" name="feedback" min="1" max="5" />
5

패턴 매치

더 많은 제어를 위해 pattern 속성을 사용하여 유효성 검사를 통과하기 위해 일치해야하는 정규 표현식을 지정하십시오. 필드가 전달되지 않으면 유효성 검증 메시지에 포함되는 title 을 지정할 수도 있습니다.

<input pattern="\d*" title="Numbers only, please.">

이 입력란에 잘못된 값이 포함 된 양식을 제출할 때 Google 크롬 버전 51에 표시된 메시지는 다음과 같습니다.

요청한 형식과 일치하십시오. 번호 만주세요.

가장 많이 사용되는 최신 브라우저 중에서도 모든 브라우저가 잘못된 패턴에 대한 메시지를 표시하는 것은 아닙니다.

CanIUse 에 대한 최신 지원을 확인하고 이에 따라 구현하십시오.

5

수락 파일 형식

file 유형의 입력 필드의 경우 비디오, 이미지, 오디오, 특정 파일 확장자 또는 특정 미디어 유형 과 같은 특정 유형의 파일 만 받아 들일 수 있습니다 . 예 :

<input type="file" accept="image/*" title="Only images are allowed">

쉼표로 여러 값을 지정할 수 있습니다 (예 :

<input type="file" accept="image/*,.rar,application/zip">

참고 : form 요소에 novalidate 속성을 추가하거나 제출 버튼에 formnovalidate 속성을 추가하면 form 요소에 대한 유효성 검사가 수행되지 않습니다. 예 :

<form>
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input pattern="\d*" name="number" required>

    <input type="submit" value="Publish"> <!-- form will be validated -->
    <input type="submit" value="Save" formnovalidate> <!-- form will NOT be validated -->
</form>

양식에는 초안을 "게시"하는 데 필요한 필드가 있지만 초안을 "저장"할 필요는 없습니다.

다시 놓기

<input type="reset" value="Reset">

reset 유형의 입력은 버튼을 생성하며,이 버튼을 클릭하면 포함 된 양식의 모든 입력을 기본 상태로 재설정합니다.

  • 입력 필드의 텍스트는 공백 또는 기본값 ( value 속성을 사용하여 지정)으로 재설정됩니다.
  • 선택 메뉴의 모든 옵션은 selected 속성이 없으면 선택 취소됩니다.
  • checked 속성이 없으면 모든 체크 박스와 라디오 박스가 선택 해제됩니다.

참고 : 재설정 버튼은 효과를 나타 내기 위해 <form> 요소 안에 있거나 form 속성을 통해 <form> 요소에 첨부되어 있어야합니다. 버튼은이 양식 내의 요소 만 재설정합니다.

번호

5
<input type="number" value="0" name="quantity">

값이 number 인 type 속성이있는 Input 요소는 요소의 값을 숫자를 나타내는 문자열로 설정하기위한 정확한 컨트롤을 나타냅니다.

이 필드는 정확한 숫자를 보장하지 않습니다. 임의의 실수로 사용할 수있는 모든 기호를 허용합니다. 예를 들어 사용자는 e1e-,0 과 같은 값을 입력 할 수 있습니다.

전화

<input type="tel" value="+8400000000">

값이 tel 인 type 속성을 가진 입력 요소는 전화 번호를 입력하기위한 한 줄 일반 텍스트 편집 컨트롤을 나타냅니다.

이메일

5

<input type="email"> 은 전자 우편 주소가 들어있는 입력 필드에 사용됩니다.

<form>
  <label>E-mail: <label>
  <input type="email" name="email">
</form>

전자 메일 주소는 브라우저 지원에 따라 제출할 때 자동으로 유효성을 검사 할 수 있습니다.

단추

<input type="button" value="Button Text">

버튼을 사용하면 양식을 제출하지 않고 페이지에서 발생하는 작업을 트리거 할 수 있습니다. 보다 쉽게 ​​스타일을 지정하거나 다른 요소를 포함 할 수있는 버튼이 필요한 경우 <button> 요소를 사용할 수도 있습니다.

<button type="button">Button Text</button>

버튼은 일반적으로 "onclick"이벤트와 함께 사용됩니다.

<input type="button" onclick="alert('hello world!')" value="Click Me">

또는

<button type="button" onclick="alert('hello world!')">Click Me</button>

속성

[name]

폼 데이터와 함께 제출되는 버튼의 name 입니다.

[type]

버튼의 type 입니다.

가능한 값은 다음과 같습니다.

submit : 버튼은 양식 데이터를 서버에 제출합니다. 속성이 지정되지 않았거나 속성이 동적으로 빈 값이나 유효하지 않은 값으로 변경되는 경우 이것이 기본값입니다.

reset : 버튼이 모든 컨트롤을 초기 값으로 재설정합니다.

button : 버튼에 기본 동작이 없습니다. 이벤트가 발생할 때 트리거되는 요소의 이벤트와 연관된 클라이언트 측 스크립트를 가질 수 있습니다.

menu : 버튼은 지정된 요소를 통해 정의 된 팝업 메뉴를 엽니 다.

[value]

버튼의 초기 값입니다.

5

제출 단추에 대한 추가 특성

속성 기술
form 버튼이 속한 양식의 ID를 지정합니다.
아무 것도 지정되지 않으면 해당 조상 양식 요소 (있는 경우)에 속합니다.
formaction 양식 데이터를 보낼 위치를 지정합니다.
이 단추를 사용하여 양식을 제출할 때
formenctype 양식 데이터를 인코딩하는 방법을 지정합니다.
이 단추를 사용하여 서버에 제출할 때.
formmethod="post" 와 함께 사용할 수 있습니다.
formmethod 사용할 HTTP 메소드 (POST 또는 GET)를 지정합니다.
이 버튼을 사용하여 양식 데이터를 보낼 때.
formnovalidate 제출시 양식 데이터의 유효성을 검사하지 않도록 지정합니다.
formtarget 수신 된 응답을 표시 할 위치를 지정합니다.
이 단추를 사용하여 양식을 제출 한 후

색깔

5
<input type="color" name="favcolor" value="#ff0000">

지원 브라우저에서, 값 유형 속성 입력 요소 color 의 값과 동일한 색으로, 버튼과 같은 제어를 생성 color (값 지정 또는 잘못된 16 진수 포맷으로되지 않을 경우 블랙 디폴트) 속성.

여기에 이미지 설명을 입력하십시오.

이 버튼을 클릭하면 사용자가 색상을 선택할 수있는 운영 체제의 색상 위젯이 열립니다.

여기에 이미지 설명을 입력하십시오.

이 입력 유형을 지원하지 않는 브라우저의 경우 폴백은 일반 입력 type=text 입니다.

여기에 이미지 설명을 입력하십시오.

URL

5
<input type="url" name="Homepage">

이것은 URL 주소를 포함해야하는 입력 필드에 사용됩니다.

브라우저 지원에 따라 url 필드는 제출 될 때 자동으로 유효성을 검사 할 수 있습니다.

일부 스마트 폰은 url 유형을 인식하고 url 입력과 일치하도록 키보드에 ".com"을 추가합니다.

날짜

5
<input type="date" />

날짜를 선택할 수있는 날짜 선택 도구가 화면에 표시됩니다. Firefox 또는 Internet Explorer에서는 지원되지 않습니다.

DateTime - 로컬

5
<input type="datetime-local" />

브라우저 지원에 따라 날짜와 시간을 선택할 수있는 날짜와 시간 선택 도구가 화면에 나타납니다.

영상

<input type="image" src="img.png" alt="image_name" height="50px" width="50px"/>

이미지. src 속성을 사용하여 이미지의 소스를 정의하고 alt 속성을 사용하여 대체 텍스트를 정의해야합니다. height 및 width 속성을 사용하여 이미지 크기를 픽셀 단위로 정의 할 수 있습니다.

범위

5
<input type="range" min="" max="" step="" />

정확한 값이 중요하지 않은 숫자를 입력하는 컨트롤입니다.

속성 기술 기본값
최소 범위의 최소값 0
최대 범위의 최대 값 100
단계 증가 할 때마다 증가 할 금액입니다. 1

5
<input type="month" />

브라우저 지원에 따라 달을 선택하는 컨트롤이 표시됩니다.

시각

5
<input type="time" />

time 입력은이 요소를 시간을 나타내는 문자열을 허용하는 것으로 표시합니다. 형식은 RFC 3339에 정의되어 있으며 다음과 같은 부분 시간이어야합니다.

19:04:39
08:20:39.04

현재 Android 용 Edge, Chrome, Opera 및 Chrome의 모든 버전에서 type = "time"을 지원합니다. 안드로이드 브라우저의 최신 버전, 특히 4.4 이상이 그것을 지원합니다. iOS 용 Safari는 최소, 최대 및 단계 특성을 지원하지 않고 부분 지원을 제공합니다.

5
<input type="week" />

브라우저 지원에 따라 주간 번호와 시간대가없는 주 번호를 입력하는 컨트롤이 표시됩니다.

본문

type 이 지정되지 않은 경우 가장 기본적인 입력 유형 및 기본 입력입니다. 이 입력 유형은 행 분리가 입력 값에서 자동으로 제거 된 단일 행 텍스트 필드를 정의합니다. 다른 모든 문자를 입력 할 수 있습니다. <input> 요소는 사용자가 데이터를 입력 할 수있는 입력 컨트롤을 선언하기 위해 <form> 요소 내에서 사용됩니다.

통사론

<input type="text">

또는 (기본 속성을 사용하여 type 을 지정하지 않고)

<input>

텍스트 필드 입력의 기본 너비는 20 자입니다. size 속성에 다음과 같이 값을 지정하여 변경할 수 있습니다.

<input type="text" size="50">

size 속성은 CSS로 너비를 설정하는 것과 분명히 다릅니다. 너비를 사용하면 입력 값이 항상 너비가되어야하는 특정 값 (픽셀 수, 부모 요소의 비율 등)을 정의합니다. size 사용하면 사용되는 글꼴과 문자의 넓이에 따라 할당 할 너비가 계산됩니다.

참고 : size 속성을 사용하면 본질적으로 상자에 입력 할 수있는 문자 수를 제한하지 않고 상자의 너비 만 표시합니다. 길이 제한은 입력 유효성 검사를 참조하십시오.

입력 필드는 한 줄의 텍스트 만 허용합니다. 상당한 양의 텍스트에 대해 여러 줄짜리 텍스트 입력이 필요한 경우 대신 <textarea> 요소를 사용하십시오.

수색

5

입력 유형 검색은 텍스트 검색에 사용됩니다. 대부분의 브라우저에서 텍스트 옆에 돋보기 기호가 공간 옆에 추가됩니다.

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

DateTime (전체)

값이 " datetime "인 type 속성을 가진 input 요소는 요소의 값을 전역 날짜와 시간을 나타내는 문자열 (시간대 정보 포함) 로 설정하는 컨트롤을 나타냅니다 .

<fieldset>
   <p><label>Meeting time: <input type=datetime name="meeting.start"></label>
</fieldset>

허용 된 속성 :

  • 전역 속성
  • 이름
  • 장애인
  • 형태
  • 유형
  • 자동 완성
  • 자동 초점
  • 명부
  • 최소 최대
  • 단계 (부동)
  • 읽기 전용
  • 요구되는 가치


Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow