HTML制作表单 PPT
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
代码 示例
<input>——提交按钮
• 创建一个用以提交表单的按钮 ▪ <input type="submit" value="提交"/>
• type属性值：submit • value属性值：指定按钮上显示文字，不指定，浏览器
▪method属性值：get
▪浏览器在action指定的URL地址后以"？"形式带上 打包数据，多个打包数据之间以&分隔
▪传递数据在url地址栏可见 ▪以get方式传递数据，传递数据量有限 ▪如果不指定method属性值，get是默认提交方式
▪method属性值：post ▪浏览器将打包数据作为请求消息的实体内容进行 发送，多个数据之间以&分隔 ▪传递数据在url地址栏不可见 ▪以post方式传递数据，传递数据量无限制
▪ type取值：
• text(单行输入文本框) • password（密码输入文本框) • submit（提交按钮） • reset(复位按钮) • radio（单选按钮） • checkbox（复选框） • button（普通按钮）
<input>——单行文本框
▪ 创建一个单行文本框
▪ <input type = "text" name="名称" size="NB"
实例 代码 示例
代码 示例
1.3 表单控件标记I
表单控件标记嵌套在<form>标记之内，又称做 "表单控件元素"或"表单元素"
• 表单控件标记I
▪ <input>
1.3.1 表单控件标记——I
<input>
<input type ="type值" name="username"/>
▪ <input>能够演变为表单中许多不同的控件标记，取决 于type属性
年 龄：<input type="text" name="age"/> <br/>
<input type="submit"/>
</form>
method属性值： 传送方式post
根据method属性值（get 或post），浏览器发送打包数
据的形式有所不同
1.2.3method属性——get和post
data2
① 访问一个包含表单的页面， 输入数据后，"提交"表单
1.1.5HTML定义表单
• 在HTML文档中，<form></form>标记，用来定 义表单的开始和结束
• 在表单<form></form>之间嵌入各类表单控件标 记（如：文本输入框、密码框、单选按钮、复选 框、提交按钮、复位按钮、列表框等）供用户输 入信息数据
▪ action属性
• 指定表单数据提交至哪个程序，让其处理表单内容
▪ method属性
• 指定表单数据提交的方式（ get方式和post方式）
<form action =“url” method=“post“ name=“表单名”> </form>
Leabharlann Baidu
1.2.1表单提交理解——action属性
<form action= "" method="post“
点击提交按钮，浏览器根据表单控件元素名称和表单控件元素值打
包表单中输入的数据，发送给action属性指定的服务器端程序
，表单所在页面也相应跳转，如果action为空或不写，表示提交给 当前页面
1.2.2表单提交说明——method属性
<form action= "" method="post">
用户名：<input type ="text" name="userName"/> <br/>
• 创建一个密码文本框 • <input type="password" name="名称" size="NB"
maxlength="NB"/>
• type属性值：password • name属性值：控件名称 • size属性值：指定密码框大小 • maxlength属性值：允许输入最多字符 • 输入的文本显示为密码形式
maxlength="NB" value="默认值" />
• type属性值为"text"的<input>标记在网页中创建一个单
行文本框
• name属性：文本框名称
• size属性：文本框长度
• maxlength属性：文本框最多输入字符数
• value属性：文本框中默认值
代码 示例
<input>——密码框
1.1.3表单作用
• 表单在Web网页中用以让访问者输入数据，当提交表 单时，表单中输入的数据被打包传递给Web服务器端 的程序以处理，从而使得Web服务器与用户之间具有 交互功能
1.1.4表单工作机制
② 浏览器将用户在表单中输入的数 据进行打包，并发送给服务器
③
服务器接收数据并转 由程序处理
data1
年 龄：<input type="text" name="age"/> <br/>
<input type="submit" value="提交查询"/>
</form>
各类表单控件标记
案例运行
1.2 表单标记<form>
• <form></form>标记负责创建一个表单 • <form>标记的重要属性
HTML制作表单
本章目标
• 认识表单 • 熟悉控件添加 • 制作简单的表单
1.1.1表单初印象
• 表单应用场合
注册中应用 表单
– 注册
– 登陆
– 调查反馈
– 查询
查询时应用 表单
调查反馈时 应用表单
登录时应用 表单
1.1.2表单？
是web网页上用户界面元素的集合体。而用户界面元素 就是网页上一些能让用户实施交互的东西，例如： 能输入一段信息的文本域， 能让用户选择是或否的问题式框， 为用户提供一系列选项的弹出式菜单， 用户可以按动的按钮等。
name=“login”>
用户名：<input type ="text" name="userName"/> <br/>
年 龄：<input type="text" name="age"/> <br/>
<input type="submit"/>
action属性值：url地址
</form>
相对或绝对路径
• 表单控件标记和表单<form>标记一起工作，共同 发挥作用
大家应该也有点累了，稍作休息
大家有疑问的，可以询问和交流
1.1.6表单举例
表单标记
<form action= "" method="post">
用户名：<input type="text" name="userName"/> <br/>
<input>——提交按钮
• 创建一个用以提交表单的按钮 ▪ <input type="submit" value="提交"/>
• type属性值：submit • value属性值：指定按钮上显示文字，不指定，浏览器
▪method属性值：get
▪浏览器在action指定的URL地址后以"？"形式带上 打包数据，多个打包数据之间以&分隔
▪传递数据在url地址栏可见 ▪以get方式传递数据，传递数据量有限 ▪如果不指定method属性值，get是默认提交方式
▪method属性值：post ▪浏览器将打包数据作为请求消息的实体内容进行 发送，多个数据之间以&分隔 ▪传递数据在url地址栏不可见 ▪以post方式传递数据，传递数据量无限制
▪ type取值：
• text(单行输入文本框) • password（密码输入文本框) • submit（提交按钮） • reset(复位按钮) • radio（单选按钮） • checkbox（复选框） • button（普通按钮）
<input>——单行文本框
▪ 创建一个单行文本框
▪ <input type = "text" name="名称" size="NB"
实例 代码 示例
代码 示例
1.3 表单控件标记I
表单控件标记嵌套在<form>标记之内，又称做 "表单控件元素"或"表单元素"
• 表单控件标记I
▪ <input>
1.3.1 表单控件标记——I
<input>
<input type ="type值" name="username"/>
▪ <input>能够演变为表单中许多不同的控件标记，取决 于type属性
年 龄：<input type="text" name="age"/> <br/>
<input type="submit"/>
</form>
method属性值： 传送方式post
根据method属性值（get 或post），浏览器发送打包数
据的形式有所不同
1.2.3method属性——get和post
data2
① 访问一个包含表单的页面， 输入数据后，"提交"表单
1.1.5HTML定义表单
• 在HTML文档中，<form></form>标记，用来定 义表单的开始和结束
• 在表单<form></form>之间嵌入各类表单控件标 记（如：文本输入框、密码框、单选按钮、复选 框、提交按钮、复位按钮、列表框等）供用户输 入信息数据
▪ action属性
• 指定表单数据提交至哪个程序，让其处理表单内容
▪ method属性
• 指定表单数据提交的方式（ get方式和post方式）
<form action =“url” method=“post“ name=“表单名”> </form>
Leabharlann Baidu
1.2.1表单提交理解——action属性
<form action= "" method="post“
点击提交按钮，浏览器根据表单控件元素名称和表单控件元素值打
包表单中输入的数据，发送给action属性指定的服务器端程序
，表单所在页面也相应跳转，如果action为空或不写，表示提交给 当前页面
1.2.2表单提交说明——method属性
<form action= "" method="post">
用户名：<input type ="text" name="userName"/> <br/>
• 创建一个密码文本框 • <input type="password" name="名称" size="NB"
maxlength="NB"/>
• type属性值：password • name属性值：控件名称 • size属性值：指定密码框大小 • maxlength属性值：允许输入最多字符 • 输入的文本显示为密码形式
maxlength="NB" value="默认值" />
• type属性值为"text"的<input>标记在网页中创建一个单
行文本框
• name属性：文本框名称
• size属性：文本框长度
• maxlength属性：文本框最多输入字符数
• value属性：文本框中默认值
代码 示例
<input>——密码框
1.1.3表单作用
• 表单在Web网页中用以让访问者输入数据，当提交表 单时，表单中输入的数据被打包传递给Web服务器端 的程序以处理，从而使得Web服务器与用户之间具有 交互功能
1.1.4表单工作机制
② 浏览器将用户在表单中输入的数 据进行打包，并发送给服务器
③
服务器接收数据并转 由程序处理
data1
年 龄：<input type="text" name="age"/> <br/>
<input type="submit" value="提交查询"/>
</form>
各类表单控件标记
案例运行
1.2 表单标记<form>
• <form></form>标记负责创建一个表单 • <form>标记的重要属性
HTML制作表单
本章目标
• 认识表单 • 熟悉控件添加 • 制作简单的表单
1.1.1表单初印象
• 表单应用场合
注册中应用 表单
– 注册
– 登陆
– 调查反馈
– 查询
查询时应用 表单
调查反馈时 应用表单
登录时应用 表单
1.1.2表单？
是web网页上用户界面元素的集合体。而用户界面元素 就是网页上一些能让用户实施交互的东西，例如： 能输入一段信息的文本域， 能让用户选择是或否的问题式框， 为用户提供一系列选项的弹出式菜单， 用户可以按动的按钮等。
name=“login”>
用户名：<input type ="text" name="userName"/> <br/>
年 龄：<input type="text" name="age"/> <br/>
<input type="submit"/>
action属性值：url地址
</form>
相对或绝对路径
• 表单控件标记和表单<form>标记一起工作，共同 发挥作用
大家应该也有点累了，稍作休息
大家有疑问的，可以询问和交流
1.1.6表单举例
表单标记
<form action= "" method="post">
用户名：<input type="text" name="userName"/> <br/>