<input> tag

Definition

<input> tag는 user가 입력할 수 있는 input filed를 명시해줍니다.

<input> element는 <form> tag의 element 중에 가장 중요합니다.

<input> element는 type attribute에 따라서 다른 형식으로 화면에 보여질수 있습니다.

<input> tag 마다 label을 명시할 수 있고, 이에 대한 처리는 <label> tag가 담당한다.

아래와 같은 type들이 존재합니다.

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

Attributes

Attribute	Value	Description
autofocus	autofocus	Specifies that an <input> element should automatically get focus when the page loads
placeholder	text	Specifies a short hint that describes the expected value of an <input> element
readonly	readonly	Specifies that an input field is read-only
required	required	Specifies that an input field must be filled out before submitting the form

Example Code

<!DOCTYPE html>
<html lang="ko">
  <head>
		<meta charset="UTF-8">
		<title>input tag test</title>
  </head>
  <body>
	<form>
    <fieldset>
      <legend>type: text, password, submit</legend>
      <label>아이디: <input type="text" id="user_id" size="10"></label>
      <label>비밀번호: <input type="password" id="user_pw" size="10"></label>
      <input type="submit" value="로그인">
    </fieldset>
    <fieldset>
      <legend>type: search, url, email, tel</legend>
      <label>검색: <input type="search" id="search_id" size="30"></label><br>
      <label>URL: <input type="url" id="url_id" size="30"></label><br>
      <label>메일: <input type="email" id="email_id" size="30"></label><br>
      <label>연락처: <input type="tel" id="tel_id" size="30"></label>
    </fieldset>
    <fieldset>
      <legend>type: checkbox, radio, number, range</legend>
      <label>체크박스1: <input type="checkbox" id="checkbox_id" value="ch1"></label><br>
      <label>체크박스2: <input type="checkbox" id="checkbox_id" value="ch2"></label><br>
      <label>라디오1: <input type="radio" id="radio_id" name="gift" value="yes"></label><br>
      <label>라디오2: <input type="radio" id="radio_id" name="gift" value="no"></label><br>
      <label>숫자: <input type="number" id="number_id" min="1", max="5"></label><br>
      <label>범위: <input type="range" id="range_id" min="1", max="3", value="2"></label>
    </fieldset>
    <fieldset>
      <legend>type: date, month, week, time, datetime-local</legend>
      <label>Date: <input type="date" id="date_id"></label><br>
      <label>Month: <input type="month" id="month_id"></label><br>
      <label>Week: <input type="week" id="week_id"></label><br>
      <label>Time: <input type="time" id="range_id"></label><br>
      <label>Datetime-local: <input type="datetime-local" id="datetime_local_id"></label>
    </fieldset>
    <fieldset>
      <legend>type: submit, reset</legend>
      <label>Submit: <input type="submit" id="submit_id" value="주문하기"></label><br>
      <label>Reset: <input type="reset" id="reset_id" value="취소하기"></label>
    </fieldset>
    <fieldset>
      <legend>type: file, hidden</legend>
      <label>File: <input type="file" id="file_id"></label><br>
      <label>Hidden: <input type="hidden" id="datetime_id"></label>
    </fieldset>
  </form>
  </body>
</html>

Result

Reference

'Study > HTML' 카테고리의 다른 글

<label> tag (0)	2021.10.04
<fieldset> tag (0)	2021.10.04
<form> tag (0)	2021.10.04
기본구조 (0)	2021.10.04