# \<form>

🔰 [HTML](..) ⟩ [Elements]() ⟩

{% 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](input/radio-buttons) 產生的 collection
  * [**NodeList**](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) - node.childNodes 或 .querySelectorAll() 回傳的物件
{% endtab %}

{% tab title="👥 相關" %}
* [Radio Buttons](input/radio-buttons) - \<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 %}
