HTML表单用法

HTML表单

• HTML 表单用于搜集不同类型的用户输入。
• 表单是一个包含表单元素的区域。
• 使用<form>定义表单

<form>
.
form elements
.
</form>

• <form>元素有一些常用属性

  • Action 属性

  action属性定义在提交表单时执行的动作，比如，一般提交表单会将表单提交到某个服务器上，可以这样写

  <form action="action_page.php">

  action属性的值可以是绝对URL，也可以是相对URL。如果省略 action 属性，则 action 会被设置为当前页面。

  • Method 属性

  method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）

  <form action="action_page.php" method="GET">

  或

  <form action="action_page.php" method="POST">

  • Name 属性

  如果要正确地被提交，每个输入字段必须设置一个 name 属性。name属性是对提交到表单的数据的一个标识，表单元素（诸如<input>等）只有设置了name属性，才能在提交表单的时候传递他们的值。

表单元素

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、单选框(radio-buttons)、复选框(checkboxes)等等。

• <input>元素

<input>是最重要的表单元素，type属性决定其类型。最常用到的有以下几种

标签	作用
<input type="text" />	创建单行文本域，用户可以在文本域中输入文本
<input type="password" />	定义密码字段，密码字段中的字符会被掩码（显示为星号或原点）
<input type="checkbox" />	定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。
<input type="radio" />	创建单选按钮单选按钮允许用户选取给定数目的选择中的一个选项
<input type="button" />	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
<input type="hidden" />	定义隐藏的输入字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改
<input type="image" src="#" alt="#" />	定义图像形式的提交按钮
<input type="file" />	定义输入字段和 "浏览"按钮，供文件上传
<input type="reset" />	定义重置按钮。重置按钮会清除表单中的所有数据
<input type="submit" />	定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面

<input>元素有一些常用的属性

属性	作用	实例
value	规定输入字段的初始值	<input type="text" name="firstname" value="John">
readonly	readonly 属性规定输入字段为只读（readonly属性不需要值）	<input type="text" name="firstname" value="John" readonly>
disabled	disabled 属性规定输入字段是禁用的，即不可用和不可点击的。被禁用的元素不会被提交。（disabled属性不需要值）	<input type="text" name="firstname" value="John" disabled>
maxlength	maxlength 属性规定输入字段允许的最大长度	<input type="text" name="firstname" maxlength="10">

还有一些H5新增的常见属性，像placeholder、autofocus、required、autocomplete等等。

• <select> 元素（下拉列表）

  • <select> 元素用来创建下拉列表。
  • <select> 元素中的 <option>标签定义了列表中的可用选项。
  • 加selected 属性来定义预定义选项

实例：

<select name="cities">
<option value="Beijing">北京</option>
<option value="Shanghai">上海</option>
<option value="Guangzhou">广州</option>
</select>

• <textarea> 元素

<textarea> 元素定义多行输入字段（文本域）

• <button> 元素

<button> 元素定义可点击的按钮

还有很多其他的常用元素，包括一些H5元素，如<datalist>，<output>等等。