HTML
입력 컨트롤 요소

소개

통사론

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

매개 변수

비고

확인란 및 라디오 버튼

개요

체크 박스와 라디오 버튼은 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 등의 새로운 입력 유형은 자동으로 유효성이 검사되며 사용자 정의 유효성 검사 제약 조건이 필요하지 않습니다.

<input required>

최소 / 최대 길이

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

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

범위 지정

min 및 max 속성을 사용하여 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" />

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

<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> 요소에 첨부되어 있어야합니다. 버튼은이 양식 내의 요소 만 재설정합니다.

번호

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

전화

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

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

이메일

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

버튼의 초기 값입니다.

색깔

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

URL

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

날짜

<input type="date" />

DateTime - 로컬

<input type="datetime-local" />

영상

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

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

범위

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

달

<input type="month" />

시각

<input type="time" />

19:04:39
08:20:39.04

주

<input type="week" />

본문

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

통사론

<input type="text">

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

<input>

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

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

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

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

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

수색

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

DateTime (전체)

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

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

허용 된 속성 :

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