docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)
W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,177 @@
|
||||
---
|
||||
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).
|
||||
Reference in New Issue
Block a user