# \<form>

🔰 [HTML](/web/html.md) ⟩ [Elements](/web/html/element.md) ⟩

{% tabs %}
{% tab title="📗 參考" %}

* JS.info ⟩ [Form properties and methods](https://javascript.info/form-elements) ⭐️⭐️
  {% endtab %}

{% tab title="📘 手冊" %}

* [your first form](https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form)
* MDN ⟩&#x20;
  * [**HTMLFormElement**](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement) ⟩ .[**elements**](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements): HTMLFormControlsCollection
  * **NodeList** ⟩ [**RadioNodeList**](https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList) - 由 [radio buttons](/web/html/element/input/radio-buttons.md) 產生的 collection
  * [**NodeList**](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) - node.childNodes 或 .querySelectorAll() 回傳的物件
    {% endtab %}

{% tab title="👥 相關" %}

* [Radio Buttons](/web/html/element/input/radio-buttons.md) - \<input type="radio>
  {% endtab %}
  {% endtabs %}

## \<label>

{% hint style="info" %}
By wrapping an `input` element inside of a `label` element it will automatically associate the radio button input with the label element surrounding it.
{% endhint %}

## access form & elements

{% hint style="info" %}

* ⭐️ document forms are members of **document.forms**&#x20;
* ⭐️ form elements are available in **form.**[**elements**](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements)
  {% endhint %}

{% tabs %}
{% tab title="js" %}

```javascript
const {log} = console;

/*
    ⭐️ document forms are members of `document.forms`
    ⭐️ form elements are available in `form.elements`
*/

// ⭐️ get <form> by "name"
let form = document.forms.form1;    // <form name="form1">
//       = document.forms[0]

// ⭐️ get <input> by "name"
let input = form.elements.age;      // <input name="age">
log(input.value);                   // 17

// ⭐️ being radio buttons, `form.elements['sex']` is a collection
let sex = form.elements.sex;        // RadioNodeList ⭐️

// ⭐️ value of checked radio button ('' if none checked ⭐️)
log(sex.value)                      // "female"

// ⭐️ turn collection into array
let values = [...sex].map(input => input.value)
log(values)                         // ["male","female"]
```

{% endtab %}

{% tab title="html" %}

```markup
<form name="form1">
  
  <!--  type="text"  -->
  <input name="name" value="Joy">
  <input name="age" value="17">
  
  <!--  ⭐️ radio buttons with same "name"  -->
  <input type="radio" name="sex" value="male">
  <input type="radio" name="sex" value="female" checked>
  
</form>
```

{% endtab %}

{% tab title="📗 參考" %}

* JS.info ⟩ [Form properties and methods](https://javascript.info/form-elements) ⭐️⭐️
  {% endtab %}

{% tab title="💾 程式" %}

* codepen ⟩ [form & inputs](https://codepen.io/lochiwei/pen/rNzBdyR?editors=1001)
  {% endtab %}
  {% endtabs %}

## \<fieldset> as "subform"

{% tabs %}
{% tab title="js" %}

```javascript
// ⭐️ form.elements: HTMLFormControlsCollection
log(form.elements.username);              // <input name="username">

// ⭐️ fieldset
let fieldset = form.elements.userInfo;    // HTMLFieldSetElement
log(fieldset.nodeName)                    // FIELDSET

// ⭐️ fieldset is a "subform"
// ⭐️ fieldset.elements: HTMLFormControlsCollection
log(fieldset.elements.username === form.elements.username)  // true

// ⭐️ shorter notation: form.name
log(form.username === form.elements.username)   // true
```

{% endtab %}

{% tab title="html" %}

```html
<form id="form">
    <fieldset name="userInfo">
      <legend>info</legend>
      <input name="username" type="text">
    </fieldset>
</form>
```

{% endtab %}

{% tab title="📗 參考" %}

* [x] JS.info ⟩ [Navigation: form and elements](https://javascript.info/form-elements#navigation-form-and-elements)
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/web/html/element/less-than-form-greater-than.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.