2nd/10_Wiki/Topic_HTML/HTML_Input_Attributes.md

---
id: html-input-attributes
title: "HTML Input Attributes"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["input attributes", "input element attributes", "form input attributes", "value attribute", "required attribute"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.90
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "forms", "input", "w3schools"]
raw_sources: ["https://www.w3schools.com/html/html_form_attributes.asp"]
applied_in: []
github_commit: ""
---

# [[HTML Input Attributes]]

## 🎯 한 줄 통찰 (One-line insight)
A set of standard attributes — `value`, `readonly`, `disabled`, `size`, `maxlength`, `min`/`max`, `multiple`, `pattern`, `placeholder`, `required`, `step`, `autofocus`, `height`/`width`, `list`, `autocomplete` — refine how an `<input>` field behaves, validates, and presents itself. [S1]

## 🧠 핵심 개념 (Core concepts)
- **value** — sets an initial (default) value for the input field. [S1]
- **readonly vs disabled** — `readonly` blocks editing but the value is still selectable, copyable, and submitted; `disabled` makes the field unusable, unclickable, and its value is **not** submitted. [S1]
- **size** — sets the visible width in characters (default 20). [S1]
- **maxlength** — caps the number of characters; the browser gives no feedback when the limit is reached. [S1]
- **min / max** — set the minimum and maximum allowed value for numeric and date/time inputs. [S1]
- **multiple** — allows entering more than one value (works with `email` and `file`). [S1]
- **pattern** — validates the value against a regular expression. [S1]
- **placeholder** — shows a hint inside the field before the user types. [S1]
- **required** — the field must be filled out before submission. [S1]
- **step** — defines the legal number intervals. [S1]
- **autofocus** — focuses the field automatically on page load. [S1]
- **height / width** — set dimensions for `<input type="image">`; recommended to reserve layout space. [S1]
- **list** — references a `<datalist>` that supplies predefined options. [S1]
- **autocomplete** — turns the browser's value-prediction on or off. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Default value pattern** — `value="..."` pre-fills the field. [S1]
- **Lock-but-submit pattern** — `readonly` keeps a value visible and submittable while preventing edits. [S1]
- **Lock-and-drop pattern** — `disabled` greys out a field and excludes its value from submission. [S1]
- **Regex validation pattern** — `pattern="[A-Za-z]{3}"` enforces format on submit. [S1]
- **Datalist autocomplete pattern** — `<input list="id">` + `<datalist id="id">` gives a typeahead of options. [S1]

## 📖 세부 내용 (Details)
**The value attribute** — specifies an initial value for an input field: [S1]
```html
<input type="text" id="fname" name="fname" value="John">
```

**The readonly attribute** — specifies that the input field is read-only; it cannot be modified, but the user can still highlight and copy the text, and the value is sent when the form is submitted: [S1]
```html
<input type="text" id="fname" name="fname" value="John" readonly>
```

**The disabled attribute** — specifies that the input field is disabled. A disabled field is unusable and un-clickable, and its value will **not** be sent when submitting the form: [S1]
```html
<input type="text" id="fname" name="fname" value="John" disabled>
```

**The size attribute** — specifies the visible width, in characters, of an input field. The default value is 20. It works with `text`, `search`, `tel`, `url`, `email`, and `password`: [S1]
```html
<input type="text" id="fname" name="fname" size="50">
```

**The maxlength attribute** — specifies the maximum number of characters allowed. Once reached, no more input is accepted, and the browser provides no feedback; use JavaScript for a message if needed: [S1]
```html
<input type="text" id="pin" name="pin" maxlength="4" size="4">
```

**The min and max attributes** — specify the minimum and maximum values for input fields of type `number`, `range`, `date`, `datetime-local`, `month`, `time`, and `week`: [S1]
```html
<input type="date" id="datemax" name="datemax" max="1979-12-31">
<input type="number" id="quantity" name="quantity" min="1" max="5">
```

**The multiple attribute** — specifies that the user is allowed to enter more than one value. It works with `email` and `file` input types: [S1]
```html
<input type="file" id="files" name="files" multiple>
```

**The pattern attribute** — specifies a regular expression the input's value is checked against. It works with `text`, `date`, `search`, `url`, `tel`, `email`, and `password`: [S1]
```html
<input type="text" id="country_code" name="country_code"
       pattern="[A-Za-z]{3}" title="Three letter country code">
```

**The placeholder attribute** — specifies a short hint describing the expected value, shown before the user enters a value. It works with `text`, `search`, `url`, `number`, `tel`, `email`, and `password`: [S1]
```html
<input type="tel" id="phone" name="phone"
       placeholder="123-45-678"
       pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
```

**The required attribute** — specifies that the input field must be filled out before submitting the form. It works with `text`, `search`, `url`, `tel`, `email`, `password`, date pickers, `number`, `checkbox`, `radio`, and `file`: [S1]
```html
<input type="text" id="username" name="username" required>
```

**The step attribute** — specifies the legal number intervals for an input field (e.g. `step="3"` allows ..., -3, 0, 3, 6, ...). It works with `number`, `range`, `date`, `datetime-local`, `month`, `time`, and `week`: [S1]
```html
<input type="number" id="points" name="points" step="3">
```

**The autofocus attribute** — specifies that the input field should automatically get focus when the page loads: [S1]
```html
<input type="text" id="fname" name="fname" autofocus>
```

**The height and width attributes** — specify the height and width of an `<input type="image">` element. It is recommended to always specify both so the browser can reserve the right amount of space before the image loads (preventing layout flicker): [S1]
```html
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
```

**The list attribute** — refers to a `<datalist>` element that contains pre-defined options for an `<input>`: [S1]
```html
<input list="browsers">

<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
```

**The autocomplete attribute** — specifies whether a form or input field should have autocomplete on or off. When on, the browser automatically completes values based on values the user entered before. It works with `<form>` and the input types `text`, `search`, `url`, `tel`, `email`, `password`, date pickers, `range`, and `color`. [S1]

**Note:** Input restrictions are not foolproof; users can bypass the HTML, so always validate input on the server as well. [S1]

## 🛠️ 적용 사례 (Applied in summary)
The examples above are the canonical applied uses: a prefilled name (`value`), a copy-only field (`readonly`), a 4-digit PIN (`maxlength`/`size`), a regex-validated country code (`pattern`), a multi-file upload (`multiple`), and a browser typeahead (`list` + `<datalist>`). No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Required + placeholder field (HTML):
```html
<input type="text" id="username" name="username" placeholder="username" required>
```
Datalist typeahead (HTML):
```html
<input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
</datalist>
```
Bounded numeric step (HTML):
```html
<input type="number" id="points" name="points" min="0" max="9" step="3">
```

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. The key conceptual subtlety is `readonly` vs `disabled`: both prevent edits, but only `readonly` submits its value and allows selection/copy — `disabled` drops the value entirely. [S1]

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.90
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Input Types]], [[HTML Input Form Attributes]], [[HTML Forms]], [[HTML Form Elements]]
- **참조 맥락:** Referenced when configuring validation, defaults, and UX behavior of individual form fields.

## 📚 출처 (Sources)
- [S1] W3Schools — HTML Input Attributes — https://www.w3schools.com/html/html_form_attributes.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Input Attributes" page (Astra wiki-curation, P-Reinforce v3.1 format).