HTML制作表单
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
▪ type属性值：checkbox ▪ value属性值：用户选中后，传送到服务器的值
▪ checked属性值：默认选中的复选项
▪ 具有相同name的多个复选按钮称为复选按钮组，一次可 以选择多项
– 提交表单时，所有选中项的value和name被打包发送：
代码
示例
<input>——普通按钮
• 创建普通按钮 • <input type="button" value="按钮显示文字"/>
• value属性值：指定按钮上显示文字，不指定，浏览器 采取默认显示（重置）
代码
示例
<input>——单选按钮
• 创建单选按钮元素
▪ <input type="radio" name="名称" value="单选按钮 的值" checked="checked"/>
▪ type属性：radio ▪ name属性值：单选按钮的控件名称
代码
示例
代码
示例
1.3 表单控件标记I
表单控件标记嵌套在<form>标记之内，又称做 "表单控件元素"或"表单元素"
• 表单控件标记I
▪ <input>
1.3.1 表单控件标记——I <input>
<input type ="type值" name="username"/>
▪ <input>能够演变为表单中许多不同的控件标记，取决 于type属性
▪ type取值：
• text(单行输入文本框)
• password（密码输入文本框)
• submit（提交按钮） • reset(复位按钮) • radio（单选按钮） • checkbox（复选框） • button（普通按钮）
<input>——单行文本框
▪ 创建一个单行文本框
▪ <input type = "text" name="名称" size="NB" maxlength="NB" value="默认值" />
Next ……
2016年12月
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.2.3method属性——get和post
▪method属性值：get
▪浏览器在action指定的URL地址后以"？"形式带上
打包数据，多个打包数据之间以&分隔 ▪传递数据在url地址栏可见 ▪以get方式传递数据，传递数据量有限 ▪如果不指定method属性值，get是默认提交方式 ▪method属性值：post ▪浏览器将打包数据作为请求消息的实体内容进行 发送，多个数据之间以&分隔 ▪传递数据在url地址栏不可见 ▪以post方式传递数据，传递数据量无限制 实例
相对或绝对路径
点击提交按钮，浏览器根据表单控件元素名称和表单控件元素值打 包表单中输入的数据，发送给action属性指定的服务器端程序 ，表单所在页面也相应跳转，如果action为空或不写，表示提交给 当前页面
1.2.2表单提交说明——method属性
<form action= "http://localhost:8080/MyApp/1.jsp" method="post">
1.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="提交查询"/>
1.1.4表单工作机制
② 浏览器将用户在表单中输入的数
据进行打包，并发送给服务器 data1
③ 服务器接收数据并转
由程序处理
data2
① 访问一个包含表单的页面，
输入数据后，"提交"表单
1.1.5HTML定义表单
• 在HTML文档中，<form></form>标记，用来定 义表单的开始和结束
• 在表单<form></form>之间嵌入各类表单控件标 记（如：文本输入框、密码框、单选按钮、复选 框、提交按钮、复位按钮、列表框等）供用户输 入信息数据 • 表单控件标记和表单<form>标记一起工作，共同 发挥作用
代码
示例
<input>——隐藏控件
• 创建隐藏控件 • <input type=“hidden” name=“控件名”/>
▪ type属性：hidden ▪ name属性值：控件名称
▪ 用于在表单中包含不希望用户看见的信息
https://www.baidu.com/s?ie=utf8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=HTML5&rsv_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_sug4=9937&rsv_sug=2 百度搜索HTML5 的get发送信息
▪ <textarea>多行文本框 ▪ <select>列表框
多行文本框
• 创建一个可输入多行文本的文本框
<textarea name=“名称” rows=“ 行数“ cols=“列数” > 多行文本框的初始显示内容 </textarea>
▪ rows, cols属性：指定行数、列数，不指定则浏览器
• type属性值为"text"的<input>标记在网页中创建一个单 行文本框
• 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"/>
1.1.2表单？
是web网页上用户界面元素的集合体。而用户界面元素 就是网页上一些能让用户实施交互的东西，例如：
能输入一段信息的文本域，
能让用户选择是或否的问题式框，
为用户提供一系列选项的弹出式菜单，
用户可以按动的按钮等。
1.1.3表单作用
• 表单在Web网页中用以让访问者输入数据，当提交表 单时，表单中输入的数据被打包传递给Web服务器端 的程序以处理，从而使得Web服务器与用户之间具有 交互功能
采取默认显示 ▪ <textarea>标记之间可以放置文本作为显示的初始值
代码
示例
列表框
• <select>标记创建一个列表框
▪ <option>标记创建一个列表项 ▪ <select>与嵌套的<option>一起使用，共同提供在一组 选项中进行选择的方式 一个<option>选项 列表框名称 <option>不需要name
• type属性值：submit • value属性值：指定按钮上显示文字，不指定，浏览器 采取默认显示（提交）
▪ 作用：点击提交按钮，浏览器将提交表单
代码
示例
<input>——复位按钮
• 将表单元素值恢复为初始默认值
• <input type="reset" value="按钮显示文字"/>
• type属性值：reset
</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表单初印象
• 表单应用场合
– 注册
– 登陆 – 调查反馈
注册中应用 表单 登录时应用 表单
– 查询
查询时应用 表单
调查反馈时 应用表单
<input>——文件控件
• 创建文件控件，便于上传文件 • <input type=“file” name=“控件名>
▪ type属性：file
▪ name属性值：控件名称 ▪ value属性值：上传文件的本地地址
代码
示例
1.4 表单控件标记II
表单控件标记嵌套在<form>标记之内，又称做 “表单控件元素”或“表单元素” • 表单控件标记II
▪ 显示为一个普通按钮 ▪ 通常和javascript程序代码配合使用
代码
示例
<input>——图像控件
• 创建图像按钮 • <input type=“image” scr=“图像地址” name=“控 件名称”/>
▪ type属性：image ▪ name属性值：控件名称 ▪ src属性值：图像文件地址
<select name=“province”> <option value=“anhui”>安徽<option/> <option vaue=“beijing”>北京</option> <option value=“xizang”>西藏</option> </select> 代码
示例
1.5作业
SOUTH PUDONG OPEN UNIVERSITY
• type属性值：password • name属性值：控件名称
• size属性值：指定密码框大小
• maxlength属性值：允许输入最多字符
• 输入的文本显示为密码形式 代码 示例
<input>——提交按钮
• 创建一个用以提交表单的按钮
▪ <input type="submit" value="提交"/>
用户名：<input type ="text" name="userName"/> <br/> 年 龄：<input type="text" name="age"/> <br/>
<input type="submit"/>
</form>
method属性值： 传送方式post
根据method属性值（get 或post），浏览器发送打包数 据的形式有所不同wenku.baidu.com
▪ checked属性值：默认选中的复选项
▪ 具有相同name的多个复选按钮称为复选按钮组，一次可 以选择多项
– 提交表单时，所有选中项的value和name被打包发送：
代码
示例
<input>——普通按钮
• 创建普通按钮 • <input type="button" value="按钮显示文字"/>
• value属性值：指定按钮上显示文字，不指定，浏览器 采取默认显示（重置）
代码
示例
<input>——单选按钮
• 创建单选按钮元素
▪ <input type="radio" name="名称" value="单选按钮 的值" checked="checked"/>
▪ type属性：radio ▪ name属性值：单选按钮的控件名称
代码
示例
代码
示例
1.3 表单控件标记I
表单控件标记嵌套在<form>标记之内，又称做 "表单控件元素"或"表单元素"
• 表单控件标记I
▪ <input>
1.3.1 表单控件标记——I <input>
<input type ="type值" name="username"/>
▪ <input>能够演变为表单中许多不同的控件标记，取决 于type属性
▪ type取值：
• text(单行输入文本框)
• password（密码输入文本框)
• submit（提交按钮） • reset(复位按钮) • radio（单选按钮） • checkbox（复选框） • button（普通按钮）
<input>——单行文本框
▪ 创建一个单行文本框
▪ <input type = "text" name="名称" size="NB" maxlength="NB" value="默认值" />
Next ……
2016年12月
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.2.3method属性——get和post
▪method属性值：get
▪浏览器在action指定的URL地址后以"？"形式带上
打包数据，多个打包数据之间以&分隔 ▪传递数据在url地址栏可见 ▪以get方式传递数据，传递数据量有限 ▪如果不指定method属性值，get是默认提交方式 ▪method属性值：post ▪浏览器将打包数据作为请求消息的实体内容进行 发送，多个数据之间以&分隔 ▪传递数据在url地址栏不可见 ▪以post方式传递数据，传递数据量无限制 实例
相对或绝对路径
点击提交按钮，浏览器根据表单控件元素名称和表单控件元素值打 包表单中输入的数据，发送给action属性指定的服务器端程序 ，表单所在页面也相应跳转，如果action为空或不写，表示提交给 当前页面
1.2.2表单提交说明——method属性
<form action= "http://localhost:8080/MyApp/1.jsp" method="post">
1.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="提交查询"/>
1.1.4表单工作机制
② 浏览器将用户在表单中输入的数
据进行打包，并发送给服务器 data1
③ 服务器接收数据并转
由程序处理
data2
① 访问一个包含表单的页面，
输入数据后，"提交"表单
1.1.5HTML定义表单
• 在HTML文档中，<form></form>标记，用来定 义表单的开始和结束
• 在表单<form></form>之间嵌入各类表单控件标 记（如：文本输入框、密码框、单选按钮、复选 框、提交按钮、复位按钮、列表框等）供用户输 入信息数据 • 表单控件标记和表单<form>标记一起工作，共同 发挥作用
代码
示例
<input>——隐藏控件
• 创建隐藏控件 • <input type=“hidden” name=“控件名”/>
▪ type属性：hidden ▪ name属性值：控件名称
▪ 用于在表单中包含不希望用户看见的信息
https://www.baidu.com/s?ie=utf8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=HTML5&rsv_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_sug4=9937&rsv_sug=2 百度搜索HTML5 的get发送信息
▪ <textarea>多行文本框 ▪ <select>列表框
多行文本框
• 创建一个可输入多行文本的文本框
<textarea name=“名称” rows=“ 行数“ cols=“列数” > 多行文本框的初始显示内容 </textarea>
▪ rows, cols属性：指定行数、列数，不指定则浏览器
• type属性值为"text"的<input>标记在网页中创建一个单 行文本框
• 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"/>
1.1.2表单？
是web网页上用户界面元素的集合体。而用户界面元素 就是网页上一些能让用户实施交互的东西，例如：
能输入一段信息的文本域，
能让用户选择是或否的问题式框，
为用户提供一系列选项的弹出式菜单，
用户可以按动的按钮等。
1.1.3表单作用
• 表单在Web网页中用以让访问者输入数据，当提交表 单时，表单中输入的数据被打包传递给Web服务器端 的程序以处理，从而使得Web服务器与用户之间具有 交互功能
采取默认显示 ▪ <textarea>标记之间可以放置文本作为显示的初始值
代码
示例
列表框
• <select>标记创建一个列表框
▪ <option>标记创建一个列表项 ▪ <select>与嵌套的<option>一起使用，共同提供在一组 选项中进行选择的方式 一个<option>选项 列表框名称 <option>不需要name
• type属性值：submit • value属性值：指定按钮上显示文字，不指定，浏览器 采取默认显示（提交）
▪ 作用：点击提交按钮，浏览器将提交表单
代码
示例
<input>——复位按钮
• 将表单元素值恢复为初始默认值
• <input type="reset" value="按钮显示文字"/>
• type属性值：reset
</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表单初印象
• 表单应用场合
– 注册
– 登陆 – 调查反馈
注册中应用 表单 登录时应用 表单
– 查询
查询时应用 表单
调查反馈时 应用表单
<input>——文件控件
• 创建文件控件，便于上传文件 • <input type=“file” name=“控件名>
▪ type属性：file
▪ name属性值：控件名称 ▪ value属性值：上传文件的本地地址
代码
示例
1.4 表单控件标记II
表单控件标记嵌套在<form>标记之内，又称做 “表单控件元素”或“表单元素” • 表单控件标记II
▪ 显示为一个普通按钮 ▪ 通常和javascript程序代码配合使用
代码
示例
<input>——图像控件
• 创建图像按钮 • <input type=“image” scr=“图像地址” name=“控 件名称”/>
▪ type属性：image ▪ name属性值：控件名称 ▪ src属性值：图像文件地址
<select name=“province”> <option value=“anhui”>安徽<option/> <option vaue=“beijing”>北京</option> <option value=“xizang”>西藏</option> </select> 代码
示例
1.5作业
SOUTH PUDONG OPEN UNIVERSITY
• type属性值：password • name属性值：控件名称
• size属性值：指定密码框大小
• maxlength属性值：允许输入最多字符
• 输入的文本显示为密码形式 代码 示例
<input>——提交按钮
• 创建一个用以提交表单的按钮
▪ <input type="submit" value="提交"/>
用户名：<input type ="text" name="userName"/> <br/> 年 龄：<input type="text" name="age"/> <br/>
<input type="submit"/>
</form>
method属性值： 传送方式post
根据method属性值（get 或post），浏览器发送打包数 据的形式有所不同wenku.baidu.com