HTML 表单

创建时间:2019.06.10 修改时间:2019.06.10

表单 <form>

表单是一个包含表单元素的区域。

表单使用表单标签 <form> 来定义。

<form>
input 元素 
</form>

表单元素 <input>

表单元素允许用户在表单中输入内容,如:文本域、下拉列表、单选框、复选框。

表单元素使用输入标签 <input> 来定义。

输入类型(type)

输入类型是由 <input> 元素的类型属性(type)来定义的。

常用的表单类型:

在大多数浏览器中,文本域的缺省宽度是 20 个字符。

 可使用 value 属性设置默认值。
密码字段字符不会明文显示,而是以星号或圆点替代。
可为单选框定义 <label> 标签,当用户点击该标签文本时,选择与之绑定的单选按钮。<label> 标签的 for 属性应当与相关元素的 id 属性相同。

 可添加 checked="checked" 表示默认选择。
可添加 checked="checked" 表示默认选择。
选择本地储存内准备传送的文件。
可通过 JavaScript 定义按钮功能。
点击之后,会将重置按钮所在的表单中填写的内容重新设置为默认值。
点击之后,提交按钮所在表单中的输入内容会被传送到另一个文件(表单数据处理文件)。表单的 action 属性定义了该目的文件的路径。method 属性定义了表单数据传送方式(get 方式数据合并到 url 中传送,post 方式数据不在 url 中体现)。
此类型不显示在页面中。通过 value 属性,定义表单中的隐藏数据。

示例:

<form action="HTML/html-form.php" method="get">
 用户名:<input type="text" name="username" value="linf">
 密码:<input type="password" name="pwd" maxlength="10"><br>

<fieldset>
<legend> 性别 </legend>
<input type="radio" name="sex" id="male" value="male" checked="checked">
<label for="male"> 男 </label><br>
<input type="radio" name="sex" id="female" value="female">
<label for="female"> 女 </label><br>
</fieldset>

<fieldset>
<legend> 爱好 </legend>
<input type="checkbox" name="game" value="1" checked="checked"> 游戏 <br>
<input type="checkbox" name="tour" value="1"> 旅游 <br>
</fieldset>

<input type="hidden" name="site" value="quma.live">
<input type="reset" value=" 重置 ">
<input type="submit" value=" 提交 ">
</form>

效果如下:

用户名: 密码:
性别

爱好 游戏
旅游

下拉列表 <select>

可通过 <optgroup> 定义选项组。

可在选项中添加 selected 表示默认选择此项。

<form>
<select name="cars">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>
</form>

效果如下:

文本框 <textarea>

多行文本输入控件。可写入字符的字数不受限制。

<form>
<textarea rows="10" cols="30">
 我是一个文本框。
</textarea>
</form>

效果如下: