表单的设计与使用
2019-03-29 本文已影响214人
辽A丶孙悟空
一、表单域的原理
- 什么是表单
- 表单在网页中主要负责数据采集功能。
表单是人和电脑互相交流的通道，表单和现实世界中的表单非常相似。- 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
- 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
- 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
- 表单区域代码
- 表单标签用于定义表单名字、提交数据的目的地及提交方式等信息。
- <form>标签用于描述表单，它是双标签。如下示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试表单</title> </head> <body> <form name="form1" action="loginServlet" method="post"> </form> </body> </html>
二、文本框
- 单行文本输入框
- 用<input>标签描述，它是一个单标签。
例如：
登录名：<input type="text" name="loginName">结果：
- name属性：指定输入框的名字，自行定义，用英文字母定义即可。
- type属性：单行文本输入框的type固定为text。
三、密码框
- 密码输入框
- 用<input>标签描述，它是单标签。
例如：
密码：<input type="password" name="password">结果：
- name属性：指定输入框的名字，自行定义，用英文字母定义即可。
- type属性：单行文本输入框的type固定为text。
四、单选框
- 单选框
- 单选框一次只能选择一个选项。
- 用<input>标签描述。
- 单选框使用时至少需要两个以上的input标签，并且他们name属性相同，其中每一个input构成一个选项。
- 用户提交出去的是VALUE里面的值，而不是页面上显示的文字。
- 例如：
性别： <input type="radio" name="sex" value="1"/>男 <input type="radio" name="sex" value="2"/>女 <input type="radio" name="sex" value="0"/>保密
结果：
五、复选框
- 复选框
- name属性：指定复选框的名字，自行定义，用英文字母定义即可。
- type属性：单选框的type固定为checkbox。
- value属性：指定该选项的值。
- checked属性：该属性固定值为checked，表示选中该选项。
- 例如：
爱好： <input type="checkbox" name="hobby" value="1"/>音乐 <input type="checkbox" name="hobby" value="2"/>看书 <input type="checkbox" name="hobby" value="3"/>运动 <input type="checkbox" name="hobby" value="4"/>编程
结果：
六、下拉菜单
- 下拉单选框
- 下拉单选框一次能选择一个选项。
- 用<select>标签描述，每一个选项用子标签<option>描述。
- 提交的是VALUE值。
- selected属性：该属性固定值为selected，表示选中该选项。
- 例如：
请选择省份： <select> <option value="0">==请选择==</option> <option value="辽宁省" selected="selected">辽宁省</option> <option value="吉林省">吉林省</option> <option value="黑龙江省">黑龙江省</option> </select>
结果：
七、多行文本
- 多行文本输入框
- 多行文本输入框用于输入大量的文字信息。用<textarea>标签描述，它是一个双标签。
- name属性：指定输入框的名字，自行定义，用英文字母定义描述。
- rows属性：指定文本框的行数。
- cols属性：指定文本框的列数。
- 例如：
个人信息： <textarea name="info" rows="10" cols="10"> </textarea>
结果：
八、上传
- 文件上传
- 文件上传标签。
- <input type = "file" />用于文件上传。
- 例如：
上传头像：<input type="file">
结果：
九、按钮
- 普通按钮
- 页面上显示的普通按钮，默认没有功能。它用<input>标签描述，它是一个单标签。
- name属性：指定按钮的名字，自行定义，用英文字母定义即可。
- type属性：提交按钮此属性的固定值为button。
- value属性：指定按钮上显示的文字。
- 例如：
<input type="button" value="普通按钮"/>
结果：
- 重置按钮
- 重置按钮用于清除表单中的所有数据。它用<input>标签描述，它是一个单标签。
- name属性：指定按钮的名字，自行定义，用英文字母定义即可。
- type属性：提交按钮此属性的固定值为reset。
- value属性：指定按钮上显示的文字。
- 例如：
登录名：<input type="text" name="loginName"> <input type="reset" value="重置按钮"/>
结果：
- 提交按钮
- 提交按钮用于将表单数据提交给action属性指定的地址进行处理。它用<input>标签描述，它是一个单标签。
- name属性：指定按钮的名字，自行定义，用英文字母定义即可。
- type属性：提交按钮此属性的固定值为submit。
- value属性：指定按钮上显示的文字。
- 例如：
<form action="#" method="get" > 登录名：<input type="text" name="loginName"> <input type="submit" value="提交按钮"/> </form>
结果：
