表单使用表单标签 <form> 来设置,多数情况下被用到的表单标签是输入标签(<input>)。输入类型是由类型属性(type)定义的。

  1. <input> 标签规定了用户可以在其中输入数据的输入字段。
  2. <input> 元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件。
  3. 你可以使用 <label> 元素来定义 <input> 元素的标注,label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。

文本域
通过<input type=”text”>标签来定义,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

<form>
    First name: <input type="text" name="firstname">
</form>

密码字段
通过标签<input type=”password”>来定义

<form>
    Password: <input type="password" name="pwd">
</form>

单选框
通过<input type=”radio”>标签来定义

<form>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
</form>

复选框
通过<input type=”checkbox”> 标签来定义,用户需要从若干给定的选择中选取一个或若干选项。

<form>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

提交按钮
通过<input type=”submit”>来定义,当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.php" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

input常用属性

name 属性规定 <input> 元素的名称
placeholde 属性规定可描述输入 <input> 字段预期值的简短的提示信息
size 属性规定以字符数计的 <input> 元素的可见宽度
type 属性规定要显示的 <input> 元素的类型
value 属性指定 <input> 元素 value 的值。