表单用于显示、收集用户信息,并提交给服务器。
完整的表单由两部分组成:
- 前端:由表单元素和更够与用户实现交互的表单控件构成
- 服务器端:表单提交后的处理
(1)表单元素:
用于定义表单的提交信息,如提交地址,提交方式等
语法:
<form name="表单名" method="提交方法" action="处理程序">
………
</form>
注意:
只有出现在form中的表单控件的数据才会被提交
form在页面中没有显示效果,只有功能
属性:
action属性:
作用:指定提交给服务器处理程序的地址,若省略不写,默认提交给本页。
method属性:
指定提交数据的方法,取值为:
- get:获取,特点是以明文的方式提交数据到服务器(数据会显示在地址栏上),安全性较低。
- post:(邮递,打包)邮寄,特点:以隐式的方式提交数据到服务器(不会显示),安全性较高。
enctype属性:
指定表单数据的编码方式,即什么样的收据允许被提交,取值为: - application/x-www-form-urlencoded默认值,可以将所有的数据提交给服务器(文件除外)
- multipart/form-data:可以将文件提交给服务器
- text/plain:只允许将普通字符提交给服务器,特殊字符无法提交(=,&,?)。
(2)表单控件:
| 标签 | 具体描述 |
|---|---|
| form | 定义供用户输入的表单 |
| input | 定义输入域 |
| textarea | 定义文本域 (一个多行的输入控件) |
| label | 定义一个控制的标签 |
| select | 定义一个选择列表 |
| option | 定义下拉列表中的选项 |
| button | 定义一个按钮 |
①<input>标记:用于定义一个用户输入区
基本语法:<input>或<input />
通用属性:
- type:根据不同的type值,创建不同的输入控件
- name:定义控件的名称,提供给服务器端使用,建议采用控件缩写+功能形式命名
- value:定义控件的值,提供给服务器端使用
- disabled:禁用控件(无法操作,无法提交),该属性无值
| 名称 | 格式 | 说明 |
|---|---|---|
| 文本域 | <input type="text" name="文本字段名称"maxlength=" " size=" " value=" "> | size与maxlength属性用来定义此区域显示的尺寸大小与输入的最大字符数 |
| 密码域 | <input type="password" name="密码字段名称"size=" " maxlength=" " value=" " > | 当用户输入密码时,区域内将会显示“*”号代替用户输入的内容 |
| 单选按钮 | <input type="radio" name=" " value=" " checked /> | checked属性用来设置该单选按钮默认状态是否被选中。当有多个互斥的单选按钮时,设置相同的name值 |
| 复选框 | <input type="checkbox" name=" " value=" " checked /> | checked属性用来设置该复选框默认状态是否被选中,当有多个复选框时,可设置相同的name值,也可以设置不同的name值 |
| 提交按钮 | <input type="submit" name=" " value=" "/> | 将表单内容提交给服务器的按钮 |
| 取消按钮 | <input type="reset" name=" " value=" "/> | 将表单内容全部清除,重新填写的按钮 |
| 图像按钮image | <input type="image" src="图片"/> | 使用图像代替submit按钮,图像的源文件名由src属性指定 |
| 文件域 | <input type="file" name=" " size=" " maxlength=" "> | 上传文件 |
| 隐藏域 | <input type="hidden" name=" " value=" " /> | 用户不能在其中输入信息,用来预设某些要传递的信息 |
②<textarea>标记:用于创建一个可以输入多行文本的文本域
基本语法:<textarea></textarea>
常用属性:
- name:用来标记文本区域,缩写txt
- cols:设置文本域的字符宽度值,以字符数为单位
- rows:设置文本域允许输入的最大行数
- readonly:只读,用户无法修改文本域的内容
③<select>标记:用于创建一个可以提供多个选项选择的下拉列表
基本语法:
<select name="" size="" multiple>
<option value="" selected>…</option>
<option value="">…</option>
……
</select>
select的属性:
- name:缩写sel
- size:默认显示选项的数量,如果大于1的话,则为滚动列表
- multiple:设置多选,无值属性,也会变成滚动列表,配合Ctrl或Shift键实现多选
④<fieldset>标记:用于为控件分组
基本语法:
<fieldset>----------分组
<legend>----------分组标题
标题名称
</legend>
组内控件
</fieldset>
例如:设计如图所示的学生信息注册网页。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学生信息注册页面</title>
</head>
<body>
<h3 align="center">学生信息注册</h3>
<form name="stu" action="">
<table>
<tr>
<td>姓名:</td>
<td><input type="text" name="stuName"></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="stuSex" checked="checked">男
<input type="radio" name="stuSex">女
</td>
</tr>
<tr>
<td>出生日期</td>
<td><input type="text" name="stuBirthday"></td>
<td>按格式yyyy-mm-dd</td>
</tr>
<tr>
<td>学校:</td>
<td><input type="text" name="stuSchool"></td>
</tr>
<tr>
<td>专业:</td>
<td>
<select name="stuSelect2">
<option selected>计算机科学与技术</option>
<option>网络工程</option>
<option>物联网工程</option>
<option>应用数学</option>
</select>
</td>
</tr>
<tr>
<td>体育特长:</td>
<td colspan="2">
<input type="checkbox" name="stuCheck">篮球
<input type="checkbox" name="stuCheck">排球
<input type="checkbox" name="stuCheck">足球
<input type="checkbox" name="stuCheck">游泳
</td>
</tr>
<tr>
<td>上传照片:</td>
<td colspan="2"><input type="file"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="stuPwd"></td>
</tr>
<tr>
<td>个人介绍:</td>
<td colspan="4"><textarea name="Letter" rows="4" cols="40"></textarea> </td>
</tr>
<tr>
<td><input type="submit" value="提交"><input type="reset" value="取消"></td>
</tr>
</table>
</form>
</body>
</html>