HTML Input Attributes

HTML Input Attributes

value :  input 요소의 기본값

readonly :  읽기만 가능하게 지정 (수정만 불가능). 제출시 양식 전송

 

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

 

---

disabled :  비활성화 - 이용불가능, 클릭불가능, 제출시에도 양식은 전송되지 않음

 

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

 

---

size :  input 요소의 너비. 기본값 20

※ 다음 요소들에 적용가능 - text, search, tel, url, email, and password

 

maxlength:  input 요소에서의 입력 가능한 최대 문자열 숫자

 

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4"><br><br>
  <input type="submit" value="Submit">
</form>

 

---

max :  input 요소 최대값

min :  input 요소 최소값

 

<form action="/action_page.php">
  <label for="datemax">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" name="datemin" min="2000-01-02"><br><br>
  
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>

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

 

---

multiple :  하나 이상의 값 입력을 가능하게 함

※ 다음 요소들에 적용가능 - email, and file.

 

<form>
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple>
</form>

 

---

pattern : input 요소 값 패턴을 지정

※ 다음 요소들에 적용가능 - text, date, search, url, tel, email, and password.

 

<form action="/action_page.php">
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
  <input type="submit" value="Submit">
</form>

3글자로 입력해야한다

---

placeholder :  input 요소의 예상 값을 설명하는 힌트

 

<form action="/action_page.php">
  <label for="phone">Enter a phone number:</label>
  <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
  <input type="submit" value="Submit">
</form>

 

---

checked :  페이지 로드시 미리 값이 선택됨

 

---

required :  전송에 필요한 필수 양식을 지정

※ 다음 요소들에 적용가능 - text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

 

<form action="/action_page.php">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <input type="submit" value="Submit">
</form>

 

---

step : 입력의 요구 숫자 간격

3 입력시 가능한 입력은 ... -3, 0, 3, 6 ... 이다

※ 다음 요소들에 적용가능 - number, range, date, datetime-local, month, time and week.

 

<form action="/action_page.php">
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
  <input type="submit" value="Submit">
</form>

---

autofocus  : input 요소 자동으로 포커스

 

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

 

---

height :  input 요소 높이

width : input 요소 너비

※ height와 width는 <input type="image"> 요소에서 사용하는 속성이다. 

 

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

 

---

list : input 요소를 위한 미리 지정된 옵션을 담은 datalist요소를 참조

 

<form>
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

 

---

autocomplete : input 요소 자동완성 여부 지정. 값을 예측한다

※ 다음 <input> type들에 적용가능 - text, search, url, tel, email, password, datepickers, range, and color.

 

<form action="/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="Submit">
</form>

 

---

---