混合式APP开发的前提基础学习——HTML3

7、表单

7.1表单的作用

1）动态交互：通过查看、填写（页面上录入数据）并提交表单信息到服务器端。

2）表单有两个基本部分：

①实现数据交互的可见的界面元素，比如文本框或按钮。

②提交后的表单处理。

3）界面元素：

①使用<form>元素创建表单。

②在<form>元素中添加其他表单可以包含的控件元素。

7.2表单元素<form>

1）定义表单：使用成对的<form></form>标记。

2）承载其他交互的元素，以表单为单位提交数据。

3）主要属性：

①action属性：定义表单被提交时发生的动作，通常包含服务方脚本的URL（比如JSP、PHP）。

②method属性：指出表单数据提交的方式，取值为get或者post。

③enctype属性：表单数据进行编码的方式。

例如：<form action="login.jsp" method="post">

地址信息：包含文本框、密码框等录入数据的元素

包含一个提交按钮

</form>

7.3 <input>元素

1）<input>元素用于收集用户信息。

2）该元素是一个空标记，语法为：<input />

3）主要属性：

①type属性：依靠type属性的取值决定元素的类型。

②value属性：取决于元素的类型，用作初始值（文本框/密码框）、用于提交的值（单/多选框）、按钮上的文本显示（提交/重置/普通按钮）。

③name属性：单选或者多选框的分组。同一组name应相同。

7.4文本框与密码框

1）文本框<input type="text" />

2）密码框<input type="password" />

3）主要属性：

①value属性：用作初始值。

②maxlength属性：限制输入的字符数。

③readonly属性：设置文本控件只读，老版本可写readonly=""，当前写成

readonly="readonly"。

7.5单选框和多选框

1）单选框：<input type="radio" />

2）多选框：<input type="checkbox" />

3）主要属性：

①value属性：当提交form时，如果选中了此单选框，那么value的值就被发送到服务器。

②name属性：单选或者多选框的分组。同一组name应相同。

③checked属性：设置初始状态是否为选中，老版本可写checked=""，当前写成checked="checked"。

7.6按钮

1）提交按钮：<input type="submit" />，传送表单数据给服务器端或其他程序处理，并且页面刷新。

2）重置按钮：<input type="reset" />，清空表单的内容并把所有表单控件恢复到默认值状态。

3）普通按钮：<input type="button" />，用于执行客户端脚本，为其设置onclick事件，才会有功能。

4）主要属性：value属性：按钮上的文本显示。

7.7隐藏域和文件选择框

1）隐藏域：<input type="hidden" />，不会显示，常用于在页面上隐藏那些不希望被用户看到的数据。

2）文件选择框：<input type="file" />，选择要上传的文件。

7.8 < label >元素

1）语法：<label>文本</label>

2）主要属性：for属性：表示与该元素相关联的控件的ID值。

3）作用：使用for属性关联其他元素，使单击文本时，就像单击关联的控件（元素）一样

例如：<input type="radio" name="sex" value="0" id="s1"/><label for="s1">女士</label>

7.9选项框

1）两种：下拉选项框和滚动列表

2）<select>：创建选项框

①name属性：选项框命名。

②size属性：大于1，则为滚动列表，即由size属性区分下拉和滚动列表。

③multiple：设置多选。

3）<option>：选项

①value属性：选项用于提交的值。

②selected属性：预选中，老版本可写selected=""，当前写成selected="selected"。

7.10 <textarea>元素

1）多行文本输入框：<textarea>文本</textarea>

2）主要属性：

①cols属性：指定文本区域的列数。

②rows属性：指定文本区域的行数。

③readonly属性：设置只读。

7.11表单元素分组（表单元素特有的）

1）<fieldset>元素：为表单控件分组。

2）<legend>元素：为分组指定一个标题

例如：<fieldset>

<label for="r1">超级管理员</label><br />

<label for="r2">帐单管理员</label>

</fieldset>

u 注意事项：所有标签都可以加ID属性，为了作唯一区分。

7.12案例：创建复杂表单

<h2>增加管理员</h2>

<td>10个字符以内</td> </tr>

<td>10个字符以内</td> </tr>

</td><td></td> </tr>

<label for="r1">超级管理员</label><br />

<label for="r2">帐单管理员</label>

</fieldset></td>

<td>至少选择一个角色</td> </tr>

</table> </form>