[HTML] input Types

HTML Input Types

---

HTML <input? element의 다양한 유형에 대한 설명입니다.

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">
• The default value of the type attribute is "text"

 

Input Type Text

---

• <intput type="text"> 은 한 줄 텍스트 입력 필드를 정의합니다.

• <form>
  	<label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname">
  </form>

Input Type Password

---

• <input type="password">는 패스워드 필드를 정의한다.

• <form>
  	<label for="username">Username:</label><br>
      <input type="text" id="username" name="username"><br>
      <label for="pwd">Password:</label><br>
      <input type="password" id="pwd" name="pwd">
  </form>

• 암호 필드의 문자는 마스킹됩니다(별표 또는 원으로 표시됨).

Input Type Submit

---

• <input type="submit">은 form-handler에 form data를 제출하기 위한 버튼을 정의합니다.
• form-handler는 일반적으로 입력 데이터를 처리하기 위한 스크립트가 있는 서버 페이지입니다.
• form-hanlder는 form의 action 속성에 지정됩니다.

• <form action="/action_page.php">
  	<label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="John">
  <br>
  	<lael for="lname">Last name:</label><br>
      <input type="text" d="lname" name="lname" value="Doe"><br>
  <br>
  	<input type="submit" value="Submit">
  </form>

• 제출 버튼의 값 속성을 생략하면 버튼에 기본 텍스트가 표시됩니다.

Input Type Reset

---

• <input type="reset">는  모든 form values을 기본값으로 재설정하는 재설정 버튼을 정의합니다.

• <form action="/action_page.php">
  	<label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="John">
  <br>
  	<label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" value="Doe"><br>
  <br>
  	<input type="submit" value="Submit">
      <input type="reset">
  </form>

• 입력 값을 변경한 후 "reset" 버튼을 클릭하면 form data가 기본값으로 재설정됩니다.

Input Type Radio

---

• <input type="radio">는 radio button을 정의한다.
• 라디오 버튼은 유저가 제한된 수의 선택지에 하나를 선택하게 한다.

• <p>Choose your favorite Web language:</p>
  
  <form>
  	<input type="radio" id-"html" name="fav_language" value="HTML">
      <label for="html">HTML</label><br>
      <input type="radio" id="css" name="fav_language" value="CSS">
      <label for="css">CSS</label><br>
      <input type="radio" id="javascript" name="fav_language" value="JavaScript">
      <label for="javascript>JavaScript</label>
  </form>

Input Type Checkbox

---

• <input type="checkbox">는 체크박스를 정의한다
• 체크박스는 사용자가 제한된 수의 선택지에서 0개 혹은 다수의 조건을 선택하도록 한다.

• <form?
  	<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
      <label for="vehicle1"> I have a bike</label><br>
      <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
      <label for="vehicle2"> I have a car</label><br>
      <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
      <label for="vehicle3"> I have a boat</label>
  </form>

Input Type Button

---

• <input type="buttom">는 버튼을 정의한다.

• <input type="button" onclick="alert('Hello World!')" value="Click Me!">

Input Type Color

---

• <input type="color">는 input fields의 컬러가 포함되어야 할 때 사용된다.
• 브라우저 지원에 따라 색상 선택기가 입력 필드에 나타날 수 있습니다.

• <form>
  	<label for="favcolor">Select your favorite color:</label>
      <input type="color" id="favcolor" name="favcolor">
  </form>

Input Type Date

---

• <input type="date"> 날짜를 포함해야 하는 입력 필드를 위해서 사용된다.
• 브라우저 지원에 따라 날짜 선태기가 입력 필드에 나타날 수 있습니다.

• <form>
  	<label for="birthdaty">Birthdata:</label>
      <input type="date" id="birthday" name="birthday">
  </form>

• 최소 및 최대 속성을 사용하여 날짜에 제한을 추가할 수도 있습니다.

• <form>
  	<label for+"datmax">Enter a date before 1980-01-01:</label>
      <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
      <label for="datemin">Enter a date after 2000-01-01:</label>
      <input type=date" id="datemin" nmae="datemin" min="2000-01-02">
  </form>

Input Type Datetime-local

---

• <input type="datetime-local">은 시간대 없이 날짜 및 시간 입력 필드를 지정합니다.
• 브라우저 지원에 따라 날짜 선택기가 입력 필드에 나타날 수 있습니다.

• <form>
  	<label for="birthdaytime">Birthdata (date and time):</label>
      <input type="datetime-local" id="birthdaytime" name="birthdaytime">
  </form>

Input Type Email

---

• <input type="email">은 이메일 ㅈ소를 포함해야 하는 입력 필드에 사용됩니다.
• 브라우저에 지원에 따라 이메일 주소는 제출되어질 때 자동적으로 유효성 검증이 될 수 있다.
• 일부 스마트폰은 이메일 유형을 인식하고 이메일 입력과 일치하도록 키보드에 ".com"을 추가합니다.

• <form>
  	<label for="email">Enter your email:</label>
      <input type="email" id="email" name="email">
  </form>

Input Type File

---

<input type="file">은 파일 선택 필드와 파일 업로드를 위한 "찾아보기" 버튼을 정의합니다.

<form>
	<label for="myfile">Select a file:</label>
    <input type="file" id="myfile" name="myfile">
</form>

Input Type hidden

---

• <input type="hidden">는 숨겨진 입력 필드를 정의합니다(사용자에게 표시되지 않음).
• 숨겨진 필드를 사용하면 웹 개발자가 양식을 제출할 때 사용자가 보거나 수정할 수 없는 데이터를 포함할 수 있습니다.
• hidden filed는 양식을 제출할 때 업데이트해야 하는 데이터베이스 레코드를 저장하는 경우가 많습니다.
• 값은 페이지 콘텐츠에서 사용자에게 표시되지 않지만 브라우저의 개발자 도구 또는 "소스 보기" 기능을 사용하여 볼 수 있고 편집할 수 있습니다. 숨겨진 입력을 보안의 한 형태로 사용하지 마십시오!

• <form>
  	<label for="fname">First name:</label>
      <input type="text" id="fname" name="fnmae"><br><br>
      <input type="hidden" id="custId" name="custId" value="3487">
      <input type="submit" value="Submit">
  </form>

Input Type Month

---

• <input type="month">는 사용자가 월과 연도를 선택할 수 있게 한다.
• 브라우저 지원에 따라 날짜 선택기가 입력 필드에 나타날 수 있습니다.

• <form>
  	<label for="bdaymonth">Birthday (month and year):</label>
      <input type="month" id="bdaymonth" name="bdaymonth">
  </form>

Input Type Number

---

• <input type="number">는 숫자 입력 필드를 정의합니다.
• 허용되는 번호에 대한을 설정할 수도 있습니다.
• 다음 예는 1에서 5 사이의 값ㅇ르 입력할 수 있는 숫자 입력 필드를 표시합니다.

• <form>
  	<label for="quantity">Quantity (between 1 and 5):</label>
      <input type="number" id="quantity" name="quantity" min="1" max="5">
  </form>

 

 

입력 제한

---

• 몇 가지 일반적인 입력 제한 목록

• Attribute	Description
  checked	페이지가 로드될 때 입력 필드가 미리 선택 되어야 함을 지정합니다(type="checkbox" 또는 type="radio"의 경우).
  disabled	입력 필드가 비활성화되어야 함을 지정합니다.
  max	입력 필드의 최대값을 지정합니다.
  maxlength	입력 필드의 최대값을 지정합니다.
  min	입력 필드의 최소값을 지정합니다.
  pattern	입력 값을 확인할 정규식을 지정합니다.
  readonly	입력 필드가 읽기 전용임을 지정합니다(변경 할 수 없음)...
  required	입력 필드가 필수임을 지정합니다(채워야함).
  size	입력 필드의 너비(문자)를 지정합니다.
  step	입력 필드의 법적 번호 간격을 지정합니다.
  value	입력 필드의 기본값을 지정합니다.

Input Type Range

---

• <input type="range">는 정확한 값이 중요하지 않은 숫자를 입력하기 위한 컨트롤을 정의합니다(예:슬라이더 컨트롤).
• 기본 범위는 0~100입니다. 
• min, max 및 step 속성으로 허용되는 숫자에 대한 제한을 설정할 수 있습니다.

• <form>
  	<label for="vol">Volume (between 0 and 50):</label>
      <input type="range" id="vol" name="vol" min="0" max="50">
  </form>

 

Input Type Search

---

• <input type="search">는 검색 필드에 사용됩니다(검색 필드는 일반 텍스트 필드처럼 작동합니다).

• <form>
  	<label for="gsearch">Search Google:</label>
      <input type="search" id="gsearch" name="gsearch">
  </form>