2nd/10_Wiki/Topic_HTML/HTML_Input_Attributes.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

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

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]

<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]

<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]

<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]

<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]

<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]

<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]

<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]

<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]

<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]

<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]

<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]

<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]

<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]

<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):

<input type="text" id="username" name="username" placeholder="username" required>

Datalist typeahead (HTML):

<input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
</datalist>

Bounded numeric step (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).