当前位置：文档之家 › HTML制作表单

HTML制作表单

  • 格式：ppt
  • 大小：1.12 MB
  • 文档页数：29

下载文档原格式

  / 29

合集下载

html form用法

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创建表单的基本步骤。

第一步：创建表单标签在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问卷调查表单

html问卷调查表单
<optionvalue="male">男</option>
<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制作网页表单验证代码

HTML制作网页表单验证代码
["贵阳","六盘水","遵义","安顺","铜仁","毕节","黔西南","黔东南","黔南"],
["昆明","曲靖","玉溪","保山","昭通","丽江","普洱","临沧","文山","红河","西双版纳","楚雄","大理","德宏","怒江","迪庆"],
["拉萨","昌都","山南","日喀则","那曲","阿里","林芝"],
["武汉","十堰","襄樊","鄂州","黄石","荆州","宜昌","荆门","孝感","黄冈","咸宁","随州","恩施"],
["长沙","株洲","湘潭","岳阳","邵阳","常德","衡阳","张家界","益阳","郴州","永州","怀化","娄底","湘西"],

htmltable表单用法

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表单模板

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代码

表单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创建表单的基本步骤创建表单是一种常见的网页设计需求,表单可以让用户输入数据或提交表单数据。

下面是创建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:提交表单数据当用户完成表单并单击提交按钮时,浏览器将向服务器发送表单数据。

html表单模板代码

html表单模板代码

html表单模板代码HTML表单是一种用于收集用户输入信息的交互性组件，一般来说表单都由多个表单元素组成，这些表单元素包括文本框，单选框，多选框，下拉框等。

HTML表单模板代码旨在为广大开发者提供模板化的HTML表单代码，方便开发者使用表单进行数据收集。

HTML表单模板代码的基本格式如下：<form action="submit-url" method="post"><label for="input-1">文本框：</label><input type="text" id="input-1" name="input-name"><label>单选框：</label><br><input type="radio" id="radio-1" name="radio-name" value="1"> <label for="radio-1">选项1</label><br><input type="radio" id="radio-2" name="radio-name" value="2"> <label for="radio-2">选项2</label><br><label>多选框：</label><br><input type="checkbox" id="check-1" name="check-name" value="1"><label for="check-1">选项1</label><br><input type="checkbox" id="check-2" name="check-name" value="2"><label for="check-2">选项2</label><br><label>下拉框：</label><br><select id="select-1" name="select-name"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select><br><label for="submit-btn"></label><input type="submit" id="submit-btn" value="提交"></form>上述代码包括了文本框，单选框，多选框和下拉框等常用表单元素的演示。

HTML表单基本格式与代码

HTML表单基本格式与代码

HTML表单基本格式与代码咱们先来看下今天咱们需要学习的内容，理解起来很简单，像我这种英语不好的只是需要背⼏个单词在HTML中创建表单需要⽤到的最基本的代码和格式1<form method="post/get">2<!--⽂本输⼊-->3<input type="text"/><!--⽂本框-->4<input type="password"/><!--密码框-->5<input type="hidden"/><!--隐藏域-->6<textarea></textarea><!--⽂本域-->7<!--按钮输⼊-->8<input type="submit"/><!--提交按钮-->9<input type="button /> <!--普通按钮-->10<input type="image" /><!--图⽚按钮-->11<input type="reset"/><!--重置按钮-->12<!--选择输⼊-->13<input type="redio" name="" checked="checked" value=""/><!--name是⽤来分组的，checked是默认值，value是命名按钮名字的-->14<input type="checkbox" name="" checked="checked" value=""/><!--复选或者是多选-->15<input type="file"/><!--上传图⽚-->16<select><!--下拉菜单-->17<option value="值">内容</option>18<option value="值">内容</option>19<option value="值">内容</option>20<option value="值">内容</option>21</select>22</form>以上就是咱们需要记住的⼀点东西看起来很复杂、很⿇烦咱们来理⼀下思路总共分为三⼤类，每类分为四种，抛出textarea\select剩下的都是input tpye= 这个样式开头的那⽂本类的就是下⾯的四个input type="text".................password.................hidden<textarea><textarea/>按钮类的input type="submit"..................button..................reset..................image选择输⼊input type="redio"..................checkbox..................file<select><option></option></select>最后后咱们来补充⼀个，⼩内容，关于选择类和按钮类的综合体咱们在⼀些⽹站去注册的帐号的时候，咱们选择选项⽐如说男、⼥，不⼀定⾮要点击按钮才可以，点击汉字也能选择的上，那这个⼩技巧是什么，咱们往下看<lable for="id">按钮内容</lable>1<input type="redio" name="" checked="checked" value="男" id="001"/>2<lable for="001">男</lable>那这样咱们去点击前⾯的按钮也可以，点击这个字“男”也可以选择上，省去了⿏标、触摸板使⽤时的很多不必要的⿇烦。

HTML制作表格

HTML制作表格
<TABLE border="1"> <TR> <TD rowspan=“3” >早上菜谱 </TD> <TD >食物</TD> <TD >鸡蛋</TD> </TR> <TR> <TD >饮料</TD> <TD >牛奶</TD> </TR> <TR> <TD>甜点</TD> <TD>开心粉</TD> </TR>
HTML 表格制作
制作人：缪卫平
本章目标
会实现简单表格 会实现跨行、跨列的复杂表格 会对表格进行美化修饰
为什么使用表格
• 表格应用场合
– 论坛 – 门户网站 – 购物网站
论坛中应用 表格
门户网站应 用表格
购物网站 应用表格
表格的基本结构
列
表头 行
单元格
在 HTML 文档中，广泛使用表格来存放网页上的文本和图像
表格的基本语法
border用来设置表 格边框尺寸大小
<TABLE border="1"> <TR> <TH> 表头单元格内容
</TH> ……
<TD> 单元格内容
</TD> ……
</TR> …… </TABLE>
<TH>…</TH> 定义列(表头)
<TD>…</TD> 定义列
<TR>…</TR > 定义行

html表格用法

html表格用法

html表格用法HTML表格用法什么是HTML表格？HTML表格是一种用于展示和组织数据的标记语言。

表格由一个或多个行和列组成，用于在网页上显示数据。

创建表格在HTML中，使用<table>元素来创建表格。

表格由行(<tr>)和单元格(<td>)组成。

下面是创建一个简单表格的代码示例：<table><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td></tr><tr><td>单元格4</td><td>单元格5</td><td>单元格6</td></tr></table>合并单元格有时候我们希望将多个单元格合并成一个，可以使用colspan和rowspan属性来实现。

colspan属性用于跨列合并，rowspan属性用于跨行合并。

<table><tr><td colspan="2">跨两列单元格</td><td>单元格3</td></tr><tr><td>单元格4</td><td rowspan="2">跨两行单元格</td><td>单元格6</td></tr><tr><td>单元格7</td><td>单元格8</td></tr></table>表头和表体在表格中，可以使用<thead>、<tbody>和<tfoot>元素来分组不同部分的内容。

html中form表单的使用方法

html中form表单的使用方法

html中form表单的使用方法HTML中的form表单是一种用于收集用户输入数据的元素，它可以包含各种类型的输入字段，如文本框、复选框、下拉框等，同时还可以指定数据的提交方式和目标地址。

在本文中，我们将学习form表单的基本用法以及一些常用的属性和事件。

一、基本用法要创建一个form表单，我们需要使用`<form>`标签，并设置一些基本属性。

以下是一个示例：```html<form action="submit.php" method="post"><!-- 表单内容 --></form>```在上面的代码中，我们通过`action`属性指定了表单数据提交的地址，这里使用了一个假设的地址`submit.php`。

`method`属性用于指定数据的提交方式，常见的有GET和POST两种方式。

二、输入字段form表单中最常见的元素就是各种输入字段，下面分别介绍几种常用的输入字段。

1. 文本框文本框用于接收用户输入的文本数据，通过`<input>`标签创建，其`type`属性设置为"text"。

示例代码如下：```html<input type="text" name="username" placeholder="请输入用户名">```上面的代码创建了一个文本框，用户可以在其中输入用户名。

`name`属性用于标识字段的名称，这个值将在数据提交时作为键名。

2. 复选框复选框用于接收用户的多选数据，通过`<input>`标签创建，其`type`属性设置为"checkbox"。

示例代码如下：```html<input type="checkbox" name="hobby" value="football">足球<input type="checkbox" name="hobby" value="basketball">篮球```上面的代码创建了两个复选框，用户可以选择自己的兴趣爱好，这些值将在数据提交时作为数组传递。

html网页表单制作

html网页表单制作

html网页表单制作1.表单标签,form,……,/form,语法:,FORM name=“form_name” ACTION=“URL”METHOD=“GET|POST”,…,/FORM,Name :定义表单的名称Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为:get ; Action :用来指定表单处理程序的位置(asp 等服务器端脚本处理程序) 2.文本框文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。

代码格式:,input type=“text” name=“...” size=“...” maxlength=“...” value=“...”,type=“text” 定义单行文本输入框;name 属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称;size 属性定义文本框的宽度，单位是单个字符宽度;maxlength 属性定义最多输入的字符数。

value 属性定义文本框的初始值3.密码框密码框是一种特殊的文本框，它的不同之处是当输入内容时，均以*表示，以保证密码的安全性。

格式:<input type=“password” name=“...” size=“...” maxlength= “...” >4. 按钮类型:普通按钮、提交按钮、重置按钮。

1) 普通按钮当type 的类型为button 时，表示该输入项输入的是普通按钮。

语法格式: <input type="button" value="…“ name=“…”>Value: 表示显示在按钮上面的文字。

普通按钮经常和脚本一起使用。

2) 提交按钮通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。

例句: <input type="submit" value="提交">3) 重置按钮当type的类型为reset时，表示该输入项输入的是重置按钮，单击按钮后，浏览器可以清除表单中的输入信息而恢复到默认的表单内容设定。

《HTML制作表格》课件

《HTML制作表格》课件

2023
REPORTING
THANKS
感谢观看
表格的间距和边距
单元格间距
设置单元格之间的间距，以像素为单 位。
行高和列宽
调整表格中行和列的高度和宽度，以 像素为单位。
单元格边距
设置单元格内部的边距，以像素为单 位。
表格的文字样式
字体类型
选择用于表格中文本的字 体类型。
字体大小
设置表格中文本的字体大 小，可以使用像素值或相 对单位。
字体颜色
设置表格中文本的颜色， 可以使用颜色名称、十六 进制或RGB值。
简洁明了、易于理解、符合网站主题风格 。
网站导航表格的HTML制作技巧
网站导航表格的动态效果
使用HTML的`<nav>`元素，结合CSS样式 进行布局和美化。
通过JavaScript实现动态导航菜单，如响应 式设计、下拉菜单等。
表单数据表格
表单数据表格的定义
01
表单数据表格用于展示表单中用户输入的数据，方便用户核对
01
02
03
边框宽度
定义表格边框的宽度，可 以使用像素值或相对单位 。
边框颜色
设置表格边框的颜色，可 以使用颜色名称、十六进 制或RGB值。
边框样式
选择边框的样式，如实线 、虚线、点线等。
表格的背景颜色
背景颜色
为表格设置背景颜色，可以使用 颜色名称、十六进制或RGB值。
背景图片
为表格添加背景图片，可以选择 图片的路径和大小。
响应式设计的优势
响应式设计可以使网页在不同设备上都能良好显示，提高用户体验。同 时，它还可以减少维护成本，因为只需要维护一套代码即可适应不同设 备的屏幕大小和分辨率。

html 表单表格模板

html 表单表格模板
border:设置边框宽度
bordercolor:设置边框的颜色(ie9以下有效，FF,谷歌，opera都有效)
eg:map.html
4】居中标签:就是将某些内容强制居中一般很少人使用
<center>
居中的内容
</center>
eg:
<center>
我是老大，你认为呢！
</center>
表格
eg:map.html
5】table标签：
1、数据的显示
2、简单的页面布局（重点）
格式:
Table tr td
<table>
i: i,ii,iii,iv,v....
如果type的值不能被识别，那么列表序列号会显示为1,2,3,4,5……
Eg:list.html
无序列表:每个列表项的前面都有一个特定符号,这样的列表
格式:
<ul >
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
Type：circle空心圆
列表、表单、表格
HTML的剩余标签
1】列表标签:
有序列表:每个列表项的前面都有个有序的序列号，这样列表
<ol >
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
</ol>
type:设置列表项序列号的样式
1：1,2,3,4,5..

HTML静态网页：表格、表单

HTML静态网页：表格、表单

HTML静态⽹页：表格、表单⼀、表格tabletable的属性width 宽度，可以⽤百分⽐或者像素，像素常⽤960border 边框，常⽤值是0cellpadding 表格内容与单元格边框的边距，常⽤值0cellspacing 单元格之间的间距，常⽤值0align 单元格⾥⾯内容的对齐⽅式bgcolor 背景⾊background 背景图⽚<tr></tr>⾏，属性align ⼀⾏内容的⽔平对齐⽅式valign ⼀⾏内容的垂直对齐⽅式height ⾏⾼bgcolor ⼀⾏的背景⾊background ⼀⾏的背景图⽚<td></td>列<th></th>表头，单元格内容会⾃动居中、加粗，与tr具有相同属性设置单元格的⾏⾼。

列⾼时，会同时影响对应的⾏或列单元格合并（建议尽量使⽤表格嵌套）colspan="n" 合并同⼀⾏，n代表同⼀⾏的⼏列rowspan="n" 合并同⼀列，n代表同⼀列的⼏⾏*可以在⽂字前⾯加上链接，设置链接属性，就可以点击进⼊相应⽹站*表单在⽹页中主要负责数据采集功能。

由三部分构成：⽂本输⼊、按钮、选择输⼊。

<form name="" method="post/get" action=""></form>id不可重复1、⽂本输⼊⽂本框：<input type="text" name="" id="" value="（需要输⼊的内容）"/>密码框：<input type="password" name="" id="" value="（需要输⼊的内容）"/>⽂本域：<input textarea name="" id="" cols="(字符多少，可理解为宽度)" rows="(⼏⾏⾼)"/>隐藏域：<input type="hidden" name="" id="" value=""/>备注：<textarea name="third" cols="" rows=""></textarea>2、按钮提交按钮：<input type="submit" name="" id="" disable="disable" value=""/>重置按钮：<input type="reset" name="" id="" disable="disable" value=""/>普通按钮：<input type="botton" name="" id="" disable="disable" value=""/>图⽚按钮：<input type="img" name="" id="" disable="disable" src="图⽚地址"/>3、选择输⼊单选按钮组：<input type="redio" name="" checked="checked" value=""/>name的值⽤来分组，如果相同name说明在同⼀个组⾥，所以不能同时选中（⽐如选男⼥）value是提交给程序的，在页⾯中不显⽰checked设置默认选项复选框组：<input type="checkbox" name="" checked="checked" value=""/>⽂件上传：<input type="file" name="" id=""/><lable for=""></lable> lable标签为input元素定义标注。

html表单的案例

html表单的案例

html表单的案例以下是一个简单的HTML表单的示例：```html<!DOCTYPE html><html><head><title>HTML表单示例</title></head><body><h1>用户注册</h1><form action="/register" method="POST"><label for="username">用户名：</label><input type="text" id="username" name="username" required><br><br><label for="password">密码：</label><input type="password" id="password" name="password" required><br><br><label for="email">邮箱：</label><input type="email" id="email" name="email" required><br><br><input type="submit" value="注册"></form></body></html>```在这个示例中，我们创建了一个用户注册的表单。

多选类型表单 html写法

多选类型表单 html写法

多选类型表单 html写法多选类型表单的HTML写法在HTML中，多选类型表单通常用于让用户从多个选项中选择一个或多个答案。

下面是一个简单的多选类型表单的HTML写法示例，主要包含以下方面：1. **form标签**`<form>`标签用于创建一个HTML表单，所有表单控件都应放在这个标签内。

在这个标签中，还可以使用`method`属性来指定用于提交表单数据的HTTP方法（例如，GET或POST），以及`action`属性来指定处理表单数据的服务器端脚本或URL。

示例：```html<form action="/submit_form" method="post">```2. **input标签**`<input>`标签用于在表单中创建输入字段。

通过设置`type`属性为`checkbox`，可以创建一个多选框，允许用户选择多个选项。

示例：```html<input type="checkbox" id="option1" name="option1"><label for="option1">选项1</label><br><input type="checkbox" id="option2" name="option2"><label for="option2">选项2</label><br><input type="checkbox" id="option3" name="option3"><label for="option3">选项3</label><br>```3. **label标签**`<label>`标签用于定义输入元素的描述，它会显示在浏览器中作为文本，并与对应的输入元素关联。

html--表单相关代码以及样式图片

html--表单相关代码以及样式图片

代码如下<html><head><title>作业6</title></head> <body><font color="red" size="6">American &nbsp; Metric</font><font color="blue" size="6">电子产品调查表</font><form name="form2" method="post"><br>请输入您的名字：<input name="name" id="name" type="text" value=""><br>请输入您的购买日期：<input name="year" id="year" type="text" value="" size="5">年</input><select value="" name="month" ><option value="m1" selected>1月</option><option value="m2">2月</option><option value="m3">3月</option></select>月<select value="" name="day"><option value="d1" selected>1</option><option value="d2">2</option><option value="d3">3</option></select>日<br>您是否查看过我们的在线产品目录？<input name="goods" id="goods" type="radio" value="是" checked>是</input><input name="goods" id="goods1" type="radio" value="否">否</input><br>如果查看过，您对哪些产品有兴趣购买？（选择提供的产品）<br><input name="good" id="good1" type="checkbox" value="dianshi">大屏幕电视机</input> <input name="good" id="good2" type="checkbox" value="yinp">音频设备</input><input name="good" id="good3" type="checkbox" value="ship">视频设备</input><input name="good" id="good4" type="checkbox" value="xiangji">相机</input><br>在填写订单之前，你还有什么问题、意见或建议？<br><textarea rows="5" cols="50">您的输入：</textarea><br><input type="submit" value="提交"/><input type="reset" value="重置"/></form></body></html>。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 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/>