HTML制作表单
html form用法
html form用法HTML 表单（HTML Form）是 HTML 中用于收集用户输入的一种常用工具。
它由表单元素组成，包括输入框、单选框、多选框、下拉列表、提交按钮等。
通过表单，用户可以向服务器提交数据，以便服务器进行处理。
下面是一个简单的 HTML 表单示例：```html<!DOCTYPE html><html><body><h2>HTML 表单</h2><form action="/submit_form" method="post"><label for="fname">名字：</label><br><input type="text" id="fname" name="fname"><br><label for="lname">姓氏：</label><br><input type="text" id="lname" name="lname"><br><br><input type="submit" value="提交"></form></body></html>```在上面的示例中，我们创建了一个名为`HTML 表单` 的表单。
表单使用 `post` 方法将数据发送到`/submit_form` 页面。
表单中包含两个文本输入框，分别用于输入名字和姓氏。
最后，表单包含一个提交按钮，用户点击该按钮即可将数据提交给服务器。
简述使用html创建表单的基本步骤
简述使用html创建表单的基本步骤使用HTML创建表单的基本步骤随着互联网的发展和普及，表单成为了我们日常生活中经常接触到的一种交互方式。
无论是在注册网站账号、提交订单还是填写问卷调查，表单都起到了关键作用。
在创建网页中的表单时，我们可以使用HTML语言来实现。
下面将介绍如何使用HTML创建表单的基本步骤。
第一步：创建表单标签在HTML中，我们使用<form>标签来创建表单。
在<form>标签中，我们可以指定表单的属性和提交方式。
以下是一个基本的表单标签的示例：```<form action="submit.php" method="post"><!-- 表单内容将提交到submit.php，并使用POST方式提交 --> </form>```第二步：添加表单元素在<form>标签内部，我们可以添加各种表单元素，如输入框、复选框、单选按钮、下拉菜单等。
每个表单元素都需要使用相应的HTML标签来表示。
以下是几种常见的表单元素示例：```<form action="submit.php" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name"><br><label for="gender">性别：</label><input type="radio" id="male" name="gender" value="male"><label for="male">男</label><input type="radio" id="female" name="gender" value="female"><label for="female">女</label><br><label for="hobby">爱好：</label><input type="checkbox" id="music" name="hobby" value="music"><label for="music">音乐</label><input type="checkbox" id="sports" name="hobby" value="sports"><label for="sports">运动</label><br><label for="city">城市：</label><select id="city" name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option></select><br><input type="submit" value="提交"></form>```在上述示例中，我们使用了<input>标签来创建输入框、复选框和单选按钮。
html问卷调查表单
<optionvalue="female">女</option>
</select><br><br>
<labelfor="country">国家：</label>
<inputtype="text"id="country"name="country"><br><br>
<labelfor="comments">意见和建议：</label><br>
<textareaid="comments"name="comments"rows="4"cols="50"></textarea><br><br>
<inputtype="submit"value="提交">
</form>
</body>
</html>
这个表单包括姓名、邮箱、年龄、性别、国家和意见和建议等字段。当用户填写完表单后，可以点击提交按钮将表单数据提交到服务器的"/submit_survey"处理程序。请注意，这只是一个简单的示例，实际应用中可能需要更多的表单字段和验证逻辑。
html问卷调查表单示例如下：
<!DOCTYPEhtml>
HTML制作网页表单验证代码
["昆明","曲靖","玉溪","保山","昭通","丽江","普洱","临沧","文山","红河","西双版纳","楚雄","大理","德宏","怒江","迪庆"],
["拉萨","昌都","山南","日喀则","那曲","阿里","林芝"],
["武汉","十堰","襄樊","鄂州","黄石","荆州","宜昌","荆门","孝感","黄冈","咸宁","随州","恩施"],
["长沙","株洲","湘潭","岳阳","邵阳","常德","衡阳","张家界","益阳","郴州","永州","怀化","娄底","湘西"],
htmltable表单用法
HTML表格（table）是一种用于显示数据的数据结构，它可以包含行（tr）和列（td）。
以下是一个简单的HTML表格表单用法示例：```html<!DOCTYPE html><html><head><title>HTML表格表单</title></head><body><h2>简单的HTML表格表单</h2><table border="1"><tr><th>姓名</th><th>年龄</th><th>城市</th></tr><tr><td>张三</td><td>25</td><td>北京</td></tr><tr><td>李四</td><td>30</td><td>上海</td></tr><tr><td>王五</td><td>28</td><td>深圳</td></tr></table></body></html>```在这个示例中，我们创建了一个包含3列（姓名、年龄、城市）的表格。
每行表示一个人的信息，包括他们的姓名、年龄和所在城市。
我们还为表头添加了`<th>`标签，以区分表头和表格内容。
HTML表单模板
HTML表单模板 1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>登录表单</title>6</head>7<body>8<!-- get post 区别 -->9<form method="post" action="地址">10<table border="1px" cellspacing="0" width="600px">11<tbody>12<tr height="40px">13<td rowspan="4" align="center">总体信息</td>14<td colspan="2"></td>1516</tr>17<tr height="40px">1819<td align="right">⽤户名：</td>20<td>21<input type="text" name="username"/>22</td>23</tr>24<tr height="40px">2526<td align="right">密码：</td>27<td>28<input type="password" name="userpasswd">29</td>30</tr>31<tr height="40px">3233<td colspan="2" align="center">34<input type="submit" value="提交"/>35<input type="reset" value="重置"/>36</td>3738</tr>3940</tbody>41</table>42</form>43</body>44</html>。
表单HTML代码
表单：整体的注册信息；表单提交必须有<form>标签<input type=”text” size=”” maxlength=””><input type=”password” size=””maxlenth=””><input type=”radio” name=”” checked=”checked”><input type=”checkbox” checked=”checked”> <input type=”file”><select><option selected=”selected”>内容</option> </select><textarea cols=”” rows=””></textarea><form action=””method=””></form>1:让reset按钮产生取消作用2：依靠action属性，跳转网页3：提交方式：get：会显示表单所填的内容Post：隐藏表单所填的内容框架：把一个网页分割成多个网页，把网页body标记删除<frameset rows/cols=“20%，*”><frame src=”1.html” noresize=“noresize”Name=””/><frame src=”2.html”noresize=“noresize”Name=””/>:插入页面</frameset> 分割网页Rows：上下分Cols：左右分Noresize：固定骨架Name:起名字某个页面加连接<a href=”” target=”b”></a> Target:在框架中某个区域显示内容。
简述使用html创建表单的基本步骤
简述使用html创建表单的基本步骤创建表单是一种常见的网页设计需求,表单可以让用户输入数据或提交表单数据。
下面是创建HTML表单的基本步骤:步骤1:HTML标签在HTML中,表单需要使用<form>标签来创建。
该标签包含多个子标签,如<label>标签用于显示表单输入字段的名称</label>,<input>标签用于定义表单输入字段,<button>标签用于创建提交按钮。
例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><button type="submit">提交</button></form>```步骤2:标签属性表单中的每个输入字段和提交按钮都需要指定属性,以便在服务器端正确地处理它们。
这些属性包括:- `<input>`标签的属性:type(输入类型),id(标识符),name(用于在服务器端查找属性值的名称),required(是否是必须的),value(输入值),pattern(正则表达式)。
- `<button>`标签的属性:type(提交类型),name(用于在服务器端查找属性值的名称),value(提交值),background(背景颜色),color(颜色),hover(hover 状态),优惠政策(是否在浏览器缓存中保留按钮)。
例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><button type="submit" name="submit" value="提交">提交</button> </form>```步骤3:表单数据表单数据通常通过<input>标签中的type属性指定,例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><input type="password" id="password" name="password" required> <input type="submit" value="提交"></form>```步骤4:提交表单数据当用户完成表单并单击提交按钮时,浏览器将向服务器发送表单数据。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 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/>