表单属性与方法

最新推荐文章于 2024-04-15 05:20:47 发布

梦想画家

最新推荐文章于 2024-04-15 05:20:47 发布

阅读量721

点赞数 1

文章标签： form forms option 表单属性

表单属性与方法

表单和控件元素，如<input>有很多特定的属性与事件。如果我们了解它们，使用表单就会方便得多。

访问表单及元素

文档中的表单是特定集合的成员：document.forms.也是一个命名集合，我们能使用名称或序号访问表单。

    document.forms.my - the form with name="my"
    document.forms[0] - the first form in the document

如果有一个表单，那么命名集合form.elements中的任何元素都是有效的。举例：

    <form name="my">
      <input name="one" value="1">
      <input name="two" value="2">
    </form>

    <script>
      // get the form
      let form = document.forms.my; // <form name="my"> element

      // get the element
      let elem = form.elements.one; // <input name="one"> element

      alert(elem.value); // 1
    </script>

可能有多个元素使用相同的名称，通常是单选按钮。则form.elements[name]返回一个集合，举例：

    <form>
      <input type="radio" name="age" value="10">
      <input type="radio" name="age" value="20">
    </form>

    <script>
    let form = document.forms[0];

    let ageElems = form.elements.age;

    alert(ageElems[0].value); // 10, the first input value
    </script>

这些导航属性不依赖标签结构，所有元素，无论在表单中处于多深的层次，使用form.elements都是有效。

Fieldset 子表单

表单可能有一个或多个<fieldset>元素，其也支持elements属性。举例：

    <body>
      <form id="form">
        <fieldset name="userFields">
          <legend>info</legend>
          <input name="login" type="text">
        </fieldset>
      </form>

      <script>
        alert(form.elements.login); // <input name="login">

        let fieldset = form.elements.userFields;
        alert(fieldset); // HTMLFieldSetElement

        // we can get the input both from the form and from the fieldset
        alert(fieldset.elements.login == form.elements.login); // true
      </script>
    </body>

简短标识: form.name

有更简短标识：我们能通过form[index/name]访问元素,代替这种方式form.elements.login,也可以写form.login。这也是可行的，但有点小问题：如果我们访问一个元素，然后改变其名称，那么旧的名称仍然有效（新的名称也有效）。通过示例更容易看明白：

    <form id="form">
      <input name="login">
    </form>

    <script>
      alert(form.elements.login == form.login); // true, the same <input>

      form.login.name = "username"; // change the name of the input

      // form.elements updated the name:
      alert(form.elements.login); // undefined
      alert(form.elements.username); // input

      // the direct access now can use both names: the new one and the old one
      alert(form.username == form.login); // true
    </script>

但通常这不是问题，因为我们很少改变表单元素的名称。

反向引用：element.form

对任何元素，通过element.form可以访问对应表单，所以表单引用所有元素，反之元素也引用表单。图示如下：

    <form id="form">
      <input type="text" name="login">
    </form>

    <script>
      // form -> element
      let login = form.login;

      // element -> form
      alert(login.form); // HTMLFormElement
    </script>

表单元素

让我们来讨论一下表单控件，留意它们的特性。

input和textarea

通常我们能获取input或textarea值，通过input.valuel,input.checked访问checkbox的值。如下：

    input.value = "New value";
    textarea.value = "New text";

    input.checked = true; // for a checkbox or radio button

使用 textarea.value, 而不是 textarea.innerHTML

请注意，我们不应该使用textarea.innerHTML:因为其仅存储页面初始化时的html，而不是当前值。

select 和 option

元素<select>有三个重要属性：

select.options – 元素的集合,
select.value – 选项的当前值,
select.selectedIndex – 已选择条目的数量.

所以有三种方式设置元素值：

查找必要的 <option> ，然后设置option.selected 为 true.
设置select.value至相应值.
设置 select.selectedIndex 至选项的序数.

第一种方式很明显，但2和3方式通常更便捷。

    <select id="select">
      <option value="apple">Apple</option>
      <option value="pear">Pear</option>
      <option value="banana">Banana</option>
    </select>

    <script>
      // all three lines do the same thing
      select.options[2].selected = true;
      select.selectedIndex = 2;
      select.value = 'banana';
    </script>

与其他控件不同，<select multiple>允许多选。这时我们需要遍历select.options获得所有选择的值。如下：

    <select id="select" multiple>
      <option value="blues" selected>Blues</option>
      <option value="rock" selected>Rock</option>
      <option value="classic">Classic</option>
    </select>

    <script>
      // get all selected values from multi-select
      let selected = Array.from(select.options)
        .filter(option => option.selected)
        .map(option => option.value);

      alert(selected); // blues,rock
    </script>

元素<select>的完整规范地址为： https://html.spec.whatwg.org/multipage/forms.html#the-select-element.

新选项

在规范有简短的语法可以创建<option>元素：

option = new Option(text, value, defaultSelected, selected);

text – option展现内容,
value – option 实际值,
defaultSelected – 如果为 true, 那么创建 selected 属性 ,
selected – 如果为 true, 该选项为选中状态.

举例：

let option = new Option("Text", "value");
// creates <option value="value">Text</option>

同样的选中元素：

let option = new Option("Text", "value", true, true);

的其他属性

Option 元素还有额外的属性:

selected
option 被选中.
index
相对其他所有选项的序号.
text
option的展示内容 (用户所见内容).

总结

访问表单：document.forms,document.forms[name/index]也可以访问表单。

form.elements
通过 form.elements[name/index]可以访问表单元素,也能直接使用form[name/index]. 对元素属性一样有用.
**
element.form**
通过form属性，元素可以引用其表单.

input.value, textarea.value, select.value 等可以获取元素value, 对 checkboxes and radio按钮需通过 input.checked 访问value.

对<select> 我们也可以通过select.selectedIndex访问index，或在通过select.options访问选项集合 .表单中其他元素的规范请参考 https://html.spec.whatwg.org/multipage/forms.html.

这些是开始处理表单的基础知识，下节将讨论focus和blur事件，几乎涉及任何元素，但主要是基于表单。

梦想画家

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫