HTML制作表单

• type属性值为"text"的&框
• name属性：文本框名称
• size属性：文本框长度
• maxlength属性：文本框最多输入字符数 • value属性：文本框中默认值
代码
示例
<input>——密码框
• 创建一个密码文本框
• <input type="password" name="名称" size="NB" maxlength="NB"/>
▪ value属性值：用户选中后，传送到服务器的值
▪ checked属性值：默认选中的单选项 ▪ 具有相同name的多个单选按钮称为单选按钮组，一次只能有 一项被选中
• 提交表单时，选中项的value和name被打包发送
代码
示例
<input>——复选按钮
• 创建复选按钮元素
▪ input type="checkbox" name="名称"value="复 选按钮的值" checked="checked"/>
• value属性值：指定按钮上显示文字，不指定，浏览器 采取默认显示（重置）
代码
示例
<input>——单选按钮
• 创建单选按钮元素
▪ <input type="radio" name="名称" value="单选按钮 的值" checked="checked"/>
▪ type属性：radio ▪ name属性值：单选按钮的控件名称
代码
示例
<input>——隐藏控件
• 创建隐藏控件 • <input type=“hidden” name=“控件名”/>
▪ type属性：hidden ▪ name属性值：控件名称
▪ 用于在表单中包含不希望用户看见的信息
https:///s?ie=utf8&f=8&rsv_bp=0&av_pq=c35c761000 01a8f0&rsv_t=bc2fJc7RpFQrzoKamrbB6zmH8aiwY%2B3GKWyvkWuDe 7xTKDykF6dn8sXfI0k&rqlang=cn&rsv_enter=0&rsv_sug3=6&rsv_sug1=5 &rsv_sug7=100&inputT=5543&rsv_sug41.1.6表单举例
表单标记
<form action= "http://localhost:8080/MyApp/1.jsp" method="post"> 用户名：<input type="text" name="userName"/> <br/>
年 龄：<input type="text" name="age"/> <br/> <input type="submit" value="提交查询"/>
• type属性值：password • name属性值：控件名称
• size属性值：指定密码框大小
• maxlength属性值：允许输入最多字符
• 输入的文本显示为密码形式 代码 示例
<input>——提交按钮
• 创建一个用以提交表单的按钮
▪ <input type="submit" value="提交"/>
1.2.1表单提交理解——action属性
<form action= "http://localhost:8080/myApp/1.jsp" method="post“ name=“login”> 用户名：<input type ="text" name="userName"/> <br/> 年 龄：<input type="text" name="age"/> <br/> action属性值：url地址 <input type="submit"/> </form>
代码
示例
代码
示例
1.3 表单控件标记I
表单控件标记嵌套在<form>标记之内，又称做 "表单控件元素"或"表单元素"
• 表单控件标记I
▪ <input>
1.3.1 表单控件标记——I <input>
<input type ="type值" name="username"/>
▪ <input>能够演变为表单中许多不同的控件标记，取决 于type属性
▪ <textarea>多行文本框 ▪ <select>列表框
多行文本框
• 创建一个可输入多行文本的文本框
<textarea name=“名称” rows=“ 行数“ cols=“列数” > 多行文本框的初始显示内容 </textarea>
▪ rows, cols属性：指定行数、列数，不指定则浏览器
相对或绝对路径
点击提交按钮，浏览器根据表单控件元素名称和表单控件元素值打 包表单中输入的数据，发送给action属性指定的服务器端程序 ，表单所在页面也相应跳转，如果action为空或不写，表示提交给 当前页面
1.2.2表单提交说明——method属性
<form action= "http://localhost:8080/MyApp/1.jsp" method="post">
Next ……
2016年12月
1.2.3method属性——get和post
▪method属性值：get
▪浏览器在action指定的URL地址后以"？"形式带上
打包数据，多个打包数据之间以&分隔 ▪传递数据在url地址栏可见 ▪以get方式传递数据，传递数据量有限 ▪如果不指定method属性值，get是默认提交方式 ▪method属性值：post ▪浏览器将打包数据作为请求消息的实体内容进行 发送，多个数据之间以&分隔 ▪传递数据在url地址栏不可见 ▪以post方式传递数据，传递数据量无限制 实例
• type属性值：submit • value属性值：指定按钮上显示文字，不指定，浏览器 采取默认显示（提交）
▪ 作用：点击提交按钮，浏览器将提交表单
代码
示例
<input>——复位按钮
• 将表单元素值恢复为初始默认值
• <input type="reset" value="按钮显示文字"/>
• type属性值：reset
1.1.2表单？
是web网页上用户界面元素的集合体。而用户界面元素 就是网页上一些能让用户实施交互的东西，例如：
能输入一段信息的文本域，
能让用户选择是或否的问题式框，
为用户提供一系列选项的弹出式菜单，
用户可以按动的按钮等。
1.1.3表单作用
• 表单在Web网页中用以让访问者输入数据，当提交表 单时，表单中输入的数据被打包传递给Web服务器端 的程序以处理，从而使得Web服务器与用户之间具有 交互功能
</form>
各类表单控件标记
案例运行
1.2 表单标记<form>
• <form></form>标记负责创建一个表单
• <form>标记的重要属性
▪ action属性
• 指定表单数据提交至哪个程序，让其处理表单内容
▪ method属性
• 指定表单数据提交的方式（ get方式和post方式）
<form action =“url” method=“post“ name=“表单名”> </form>
SOUTH PUDONG OPEN UNIVERSITY
网页设计
表单制作
上海开放大学浦东南校 缪卫平
本章目标
• 认识表单
• 熟悉控件添加
• 制作简单的表单
1.1.1表单初印象
• 表单应用场合
– 注册
– 登陆 – 调查反馈
注册中应用 表单 登录时应用 表单
– 查询
查询时应用 表单
调查反馈时 应用表单
▪ type属性值：checkbox ▪ value属性值：用户选中后，传送到服务器的值
▪ checked属性值：默认选中的复选项
▪ 具有相同name的多个复选按钮称为复选按钮组，一次可 以选择多项
– 提交表单时，所有选中项的value和name被打包发送：
代码
示例
<input>——普通按钮
• 创建普通按钮 • <input type="button" value="按钮显示文字"/>
用户名：<input type ="text" name="userName"/> <br/> 年 龄：<input type="text" name="age"/> <br/>