表单字段

表单最初是为 JavaScript 之前的网页设计的，允许网站通过 HTTP 请求发送用户提交的信息。 这种设计假定与服务器的交互，总是通过导航到新页面实现。

但是它们的元素是 DOM 的一部分，就像页面的其他部分一样，并且表示表单字段的 DOM 元素，支持许多其他元素上不存在的属性和事件。 这些使其可以使用 JavaScript 程序检查和控制这些输入字段，以及可以执行一些操作，例如向表单添加新功能，或在 JavaScript 应用程序中使用表单和字段作为积木。

一个网页表单在其<form>标签中包含若干个输入字段。HTML 允许多个的不同风格的输入字段，从简单的开关选择框到下拉菜单和进行输入的字段。本书不会全面的讨论每一个输入字段类型，不过我们会先大概讲述一下。

很多字段类型都使用<input>标签。标签的type属性用来选择字段的种类，下面是一些常用的<input>类型。

  • text：一个单行的文本输入框。

  • password：和text相同但隐藏了输入内容。

  • checkbox：一个复选框。

  • radio：一个多选择字段中的一个单选框。

  • file：允许用户从本机选择文件上传。

表单字段并不一定要出现在<form>标签中。你可以把表单字段放置在一个页面的任何地方。但这样不带表单的字段不能被提交（一个完整的表单才可以），当需要和 JavaScript 进行响应时，我们通常也不希望按常规的方式提交表单。

  1. <p><input type="text" value="abc"> (text)</p>
  2. <p><input type="password" value="abc"> (password)</p>
  3. <p><input type="checkbox" checked> (checkbox)</p>
  4. <p><input type="radio" value="A" name="choice">
  5.    <input type="radio" value="B" name="choice" checked>
  6.    <input type="radio" value="C" name="choice"> (radio)</p>
  7. <p><input type="file"> (file)</p>

这些元素的 JavaScript 接口和元素类型不同。

多行文本输入框有其自己的标签<textarea>，这样做是因为通过一个属性来声明一个多行初始值会十分奇怪。<textarea>要求有一个相匹配的</textarea>结束标签并使用标签之间的文本作为初始值，而不是使用value属性存储文本。

  1. <textarea>
  2. one
  3. two
  4. three
  5. </textarea>

<select>标签用来创造一个可以让用户从一些提前设定好的选项中进行选择的字段。

  1. <select>
  2.   <option>Pancakes</option>
  3.   <option>Pudding</option>
  4.   <option>Ice cream</option>
  5. </select>

当一个表单字段中的内容更改时会触发change事件。