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,152 @@
|
||||
---
|
||||
id: html-input-form-attributes
|
||||
title: "HTML Input Form Attributes"
|
||||
category: "Frontend"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["input form attributes", "formaction", "formmethod", "formtarget", "formnovalidate", "form override attributes"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.89
|
||||
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_form.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HTML Input Form Attributes]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The `form*` family of `<input>` attributes (`form`, `formaction`, `formenctype`, `formmethod`, `formtarget`, `formnovalidate`) lets an individual input override its parent `<form>`'s submission behavior — enabling multiple submit buttons with different destinations, methods, encodings, or validation within one form. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **form** — associates an input with a `<form>` by that form's `id`, so the input can live **outside** the `<form>` element and still be part of it. [S1]
|
||||
- **formaction** — specifies the URL that processes the input when submitted; overrides the form's `action`. Works with `submit` and `image`. [S1]
|
||||
- **formenctype** — specifies how form data is encoded on submit (only for `method="post"`); overrides the form's `enctype`. Works with `submit` and `image`. [S1]
|
||||
- **formmethod** — specifies the HTTP method (GET/POST) for submission; overrides the form's `method`. Works with `submit` and `image`. [S1]
|
||||
- **formtarget** — specifies where to display the response after submission; overrides the form's `target`. Works with `submit` and `image`. [S1]
|
||||
- **formnovalidate** — specifies that this input should bypass validation on submit; overrides the form's `novalidate`. Works with `submit`. [S1]
|
||||
- **novalidate (form-level)** — a `<form>` attribute that disables validation for all data on submission. [S1]
|
||||
|
||||
## 🧩 추출된 패턴 (Extracted patterns)
|
||||
- **Detached input pattern** — `<input ... form="form1">` ties an input outside the `<form>` to the form whose `id="form1"`. [S1]
|
||||
- **Multiple-destination pattern** — two `<input type="submit">` in one form, one with `formaction` pointing elsewhere, give two submit targets. [S1]
|
||||
- **Per-button method override** — one submit uses the form's GET, another adds `formmethod="post"`. [S1]
|
||||
- **Skip-validation submit** — a secondary submit with `formnovalidate` lets users submit without passing validation (e.g. "save draft"). [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
**The form attribute** — specifies which form an `<input>` element belongs to. Its value must equal the `id` of the `<form>`. This lets an input placed outside the `<form>` element still be submitted with it: [S1]
|
||||
```html
|
||||
<form action="/action_page.php" id="form1">
|
||||
<label for="fname">First name:</label>
|
||||
<input type="text" id="fname" name="fname"><br><br>
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
|
||||
<label for="lname">Last name:</label>
|
||||
<input type="text" id="lname" name="lname" form="form1">
|
||||
```
|
||||
|
||||
**The formaction attribute** — specifies the URL of the file that will process the input when the form is submitted; it overrides the `action` attribute of the `<form>`. It works with `type="submit"` and `type="image"`: [S1]
|
||||
```html
|
||||
<form action="/action_page.php">
|
||||
<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="submit" value="Submit">
|
||||
<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
|
||||
</form>
|
||||
```
|
||||
|
||||
**The formenctype attribute** — specifies how the form data should be encoded when submitted (only for `method="post"`); it overrides the `enctype` attribute of the `<form>`. It works with `type="submit"` and `type="image"`: [S1]
|
||||
```html
|
||||
<form action="/action_page_binary.asp" method="post">
|
||||
<label for="fname">First name:</label>
|
||||
<input type="text" id="fname" name="fname"><br><br>
|
||||
<input type="submit" value="Submit">
|
||||
<input type="submit" formenctype="multipart/form-data"
|
||||
value="Submit as Multipart/form-data">
|
||||
</form>
|
||||
```
|
||||
|
||||
**The formmethod attribute** — defines the HTTP method (GET or POST) for sending form data to the action URL; it overrides the `method` attribute of the `<form>`. GET appends data to the URL; POST sends data as an HTTP transaction (more secure for sensitive data). It works with `type="submit"` and `type="image"`: [S1]
|
||||
```html
|
||||
<form action="/action_page.php" method="get">
|
||||
<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="submit" value="Submit using GET">
|
||||
<input type="submit" formmethod="post" value="Submit using POST">
|
||||
</form>
|
||||
```
|
||||
|
||||
**The formtarget attribute** — specifies a name or keyword indicating where to display the response after submitting the form; it overrides the `target` attribute of the `<form>`. It works with `type="submit"` and `type="image"`: [S1]
|
||||
```html
|
||||
<form action="/action_page.php">
|
||||
<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="submit" value="Submit">
|
||||
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
|
||||
</form>
|
||||
```
|
||||
|
||||
**The formnovalidate attribute** — specifies that an `<input>` element should not be validated when submitted; it overrides the `novalidate` attribute of the `<form>`. It works with `type="submit"`: [S1]
|
||||
```html
|
||||
<form action="/action_page.php">
|
||||
<label for="email">Enter your email:</label>
|
||||
<input type="email" id="email" name="email"><br><br>
|
||||
<input type="submit" value="Submit">
|
||||
<input type="submit" formnovalidate="formnovalidate"
|
||||
value="Submit without validation">
|
||||
</form>
|
||||
```
|
||||
|
||||
**The novalidate attribute (form-level)** — a `<form>` attribute that, when present, specifies that all of the form data should not be validated when submitted. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
The examples above are the canonical applied uses: a "Last name" field rendered outside the form yet submitted with it (`form`), a dual "Submit" / "Submit as Admin" pair routing to different handlers (`formaction`), a GET/POST toggle (`formmethod`), opening the response in a new tab (`formtarget`), and a "Submit without validation" escape hatch (`formnovalidate`). No external project/commit applications found in the source.
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Two submit buttons → two destinations (HTML):
|
||||
```html
|
||||
<input type="submit" value="Submit">
|
||||
<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
|
||||
```
|
||||
Input attached to a form by id (HTML):
|
||||
```html
|
||||
<input type="text" id="lname" name="lname" form="form1">
|
||||
```
|
||||
Skip-validation submit (HTML):
|
||||
```html
|
||||
<input type="submit" formnovalidate="formnovalidate" value="Submit without validation">
|
||||
```
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
No contradictions found in the source. The unifying principle: each `form*` attribute on a submit/image input is an **override** of the corresponding `<form>` attribute, scoped to the moment that button submits the form. [S1]
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.89
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[HTML Tutorial]]
|
||||
- **관련 개념:** [[HTML Input Attributes]], [[HTML Input Types]], [[HTML Forms]], [[HTML Form Elements]]
|
||||
- **참조 맥락:** Referenced when a single form needs multiple submit buttons with differing destinations, methods, or validation rules.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — HTML Input Form Attributes — https://www.w3schools.com/html/html_form_attributes_form.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Input Form Attributes" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
Reference in New Issue
Block a user