HTML: < input > 태그

HTML Tag : <input> 태그

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

input 태그란?

input 태그는 사용자가 데이터를 입력 할 수있는 입력 필드를 지정합니다.

input 요소는 사용자가 데이터를 입력 할 수있는 입력 컨트롤을 선언하기 위해 form 요소 내에서 사용됩니다.

입력 필드는 유형 특성에 따라 여러 가지 방식으로 다를 수 있습니다.

input 요소는 비어 있으며 속성만 포함되어 있습니다.

속성

• accept :서버가 허용하는 파일 형식을 지정합니다(type=”file”)
  • file_extension
  • audio
  • video
  • image
  • media_type
• alt:이미지의 대체 텍스트를 지정합니다(type=”image”)
• autocomplete :input 요소에 자동 완성 기능을 사용할지 여부를 지정합니다.
  • on
  • off
• autofocus :페이지가 로드될 때 input 요소가 자동으로 포커스를 받도록 지정합니다.
• checked :페이지가 로드될 때(type=”checkbox” 또는 type=”radio”)를 미리 선택해야 함을 지정합니다.
• dirname :텍스트 방향을 제출하도록 지정합니다.
• disabled :input 요소를 사용하지 않도록 지정합니다.
• form :input 요소가 속한 하나 이상의 양식을 지정합니다.
• formaction :양식을 제출할 때 입력 제어를 처리할 파일의 URL을 지정합니다(type=”submit” 및 type=”image”)
• formenctype :폼 데이터를 서버에 제출할 때 폼 데이터를 인코딩하는 방법(type=”submit” and type=”image”)을 지정합니다.
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
• formmethod :작업 URL(type=”submit”, type=”image”)에 데이터를 전송하는 HTTP방법을 정의 합니다.
  • get
  • post
• formnovalidate :제출할 때 양식 요소의 유효성을 검사하지 않아야 함을 정의 합니다.
• formtarget :양식을 제출한 후 받을 응답위치(type = submit, type=image)를 지정합니다.
  • _blank
  • _self
  • _parent
  • _top
  • framename
• height :input 요소의 높이를 지정합니다(type = image)
• list: input 요소에 대해 미리 정의된 옵션이 포함된 datalist 요소를 나타냅니다.
• max :input 요소에 최대 값을 지정합니다.
• maxlength :input 요소에 허용되는 최대 문자 수를 지정합니다.
• min : input 요소의 최소 값을 지정합니다.
• multiple :사용자가 input 요소에 둘 이상의 값을 입력할 수 있도록 지정합니다.
• name : input 요소의 이름을 지정합니다.
• pattern :input 요소의 값이 다음에 대해 검사되는 정규식을 지정합니다.
• placeholder :input 요소의 예상 값을 설명하는 짧은 힌트를 지정합니다.
• readonly :입력 필드가 읽기 전용임을 지정합니다.
• required :필수 입력 필드를 입력해야 양식을 제출할 수 있음을 지정합니다.
• size :input 요소의 폭(문자)을 지정합니다.
• src : 제출 버튼으로 사용할 이미지의 URL을 지정합니다(type=”image”)
• step :입력 필드의 법적 번호 간격을 지정합니다.
• type : input 요소의 유형을 지정합니다.
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
• value : input 요소의 값을 지정합니다.
• width : input 요소의 너비를 지정합니다. (type = inage)