HTML5网页制作技术第9章 表单
- 格式：pptx
- 大小：225.84 KB
- 文档页数：11
下载文档原格式
合集下载
HTML5表单元素介绍
2、<form>标签常用属性详解在表单的<form>标记中还可以设置表单的基本属性，包括表单的名称、处理程序、传送方法等。
一般情况下，表单的处理程序action和传送方法method是必不可少的参数。
action属性定义一个URL。
当点击提交按钮时，向这个URL 发送数据。
真正处理表单的数据脚本或程序是在action属性里，这个属性值可以是程序或脚本的一个完整的URL。
说明：在该语法中，表单的处理程序定义的是表单要提交的地址，也就是表单中收集到的资料将要传递的程序地址。
这一地址可以是绝对地址，也可以是相对地址，还可以是一些其他的地址形式，例如发送E-mail等。
<form action="mailto:1347014722@"> </form>method属性用于向action URL 发送数据的HTTP 方法。
method=get：使用这个设置时，来访者输入的数据会附加在URL之后，由用户端直接发送至服务器，所以速度上会比post快，但缺点是数据长度不能够太长。
在没有指定method的情形下一般都会视get为默认值。
method=post：使用这种设置时，表单数据是与URL分开发送的，用户端的计算机会通知服务器来读取数据，所以通常没有数据长度上的限制，缺点是速度上也会比POST慢。
enctype属性对表单内容进行编码的MIME 类型。
Text/plain 以纯文本的形式传送application /x-www-form-urlencoded 默认的编码形式multipart/form-data MIME编码，上传文件的表单必须选择该项target属性目标显示方式。
target属性用来指定目标窗口的打开方式。
_blank是指将返回的信息显示在新打开的窗口中；_parent是指将返回信息显示在父级的浏览器窗口中；_self则表示将返回信息显示在当前浏览器窗口；_top表示将返回信息显示在顶级浏览器窗口中。
HTML表单
HTML表单⽬录HTML表单HTML表单是⽤户和web站点或应⽤程序之间交互的主要内容之⼀。
它们允许⽤户将数据发送到web站点。
⼤多数情况下，数据被发送到web服务器，但是web 页⾯也可以⾃⼰拦截它并使⽤它；HTML表单是由⼀个或多个⼩部件组成的。
这些⼩部件可以是⽂本字段(单⾏或多⾏)、选择框、按钮、复选框或单选按钮；HTML表单和常规HTML⽂档的主要区别在于，⼤多数情况下，表单收集的数据被发送到web服务器；form表单所有的HTML表单都是以⼀个<form>标签开始的；form表单:获取⽤户的数据并发送给后端(服务端)<form></form>标签<form action="/my-handling-form-page" method="post"></form>这个元素正式定义了⼀个表单，就像<div>和<p>标签，它是⼀个容器元素，但它也⽀持⼀些特定的属性来配置表单的⾏为⽅式。
它的所有属性都是可选的，但实践中最好⾄少要设置action属性和method属性。
action 属性定义了在提交表单时,应该把所收集的数据送给谁(地址)(URL)去处理，.action="URL"method 属性定义了发送数据的HTTP⽅法(它可以是“get”或“post”)，method="数据的提交⽅式"提交⽅式：get post put delete patchinput标签获取⽤户数据最为常⽤的标签就是<input>标签并且该标签是⾏内标签；直接编写input标签会出现黄⾊阴影，原因在于input需要结合lable标签⼀起使⽤；⽅式1:lable包裹input并绑定id<label for='input标签id值'>input标签</label><!--案例--><p><label for="d1">name:<input type="text" id="d1"></label></p>⽅式2:label与input单独出现并绑定id<label for="d1">username:</label><input type="text" id="d1"><!--案例--><p><label for="d1">name:</label><input type="text" id="d1"></p>input标签通过type指定不同的参数来修改表现形式（变形⾦刚）type指定的参数参数说明text普通⽂本password密⽂密码date⽇历展⽰radio 单选 ->多个选项标签需要有相同的name属性默认选中需要额外配置checked='checked'当属性名与属性值相等的时候可以简写checkedcheckbox多选，相当于复选框，默认选中参数也是checkedemail邮箱格式file上传⽂件（单个）file添加multiple参数上传多个⽂件submit提交按钮button普通按钮（本⾝没有任何功能，需要绑定js）reset重置按钮按钮组的提⽰信息可以通过value属性⾃定义，如果不⾃定义那么不同的浏览器可能会展⽰出不同的提⽰信息，尤其是submit按钮select标签下拉框<!--select下拉框，默认单选，多选需要指定参数multiple--><select name="province" id="" ><option value="北京">Beijing</option><option value="上海">Shanghai</option><option value="天津">Tianjin</option></select>进度条标签<progress max="100" value="30">30/100</progress>textarea标签⽂本框<p>textbox:<!-- ⽂本框 --><textarea name="info" cols="30" rows="10"></textarea></p>案例：前后端交互flask框架写后端，可以⽤过后端框架来达到TCP服务端的⽬的from flask import Flask,requestapp = Flask(__name__)@app.route('/index/',methods=['GET','POST'])def index():print(request.form) # 获取普通数据print(request.files) # 获取⽂件数据# print(request.form.get('name'))file_obj = request.files.get('file') # 获取⽂件对象file_obj.save('xxx.md') # 保存⽂件return '提交成功'app.run()HTML表单写提交数据<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><h2>信息页⾯</h2><!--表单--><form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"> <!--利⽤块级标签分⾏显⽰ --><!--lable绑定id--><p><label for="d1">name:</label><input type="text" id="d1" name="name"></p><!-- 密⽂密码 --><!-- lable标签包裹input --><p><label>pwd: <input type="password" name="pwd"></label></p><p><label>birthday:<input type="date" name="data"></label></p><!--性别单选框--><p>gender<!--如果想要实现单选的功能，name指定同⼀个参数 --><!--checked默认选中，参数名和参数值相同可以简写为checked--><input type="radio" name="gender" checked="checked" value="男">male<input type="radio" name="gender" value="⼥">female<input type="radio" name="gender" value="其他">others</p><!--爱好--><p>hobby:<!-- 复选框 --><input type="checkbox" checked="checked" name="hobby" value="篮球">baskball<input type="checkbox" name="hobby" value="⾜球" >football<input type="checkbox" name="hobby" value="乒乓">pingpang<p>others hobby:<input type="text" name="hobby" value="其他爱好"><p><p>email:<input type="email" name="email" value="please input Email"></p></p><p>province:<!--select下拉框，默认单选，多选需要指定参数multiple--><select name="province" id="" ><option value="北京">Beijing</option><option value="上海">Shanghai</option><option value="天津">Tianjin</option></select></p><p>idol:<!--多选multiple--><select name="idol" id="" multiple><option value="dzj">邓紫棋</option><option value="zjl">周杰伦</option><option value="cyx">陈奕迅</option></select></p><p>textbox:<!-- ⽂本框 --><textarea name="info" id="" cols="30" rows="10"></textarea></p><p>File:<!--上传单个⽂件--><input type="file" name="file"></p><p>MultFile:<!--上传多个⽂件，⽂件夹不可以--><input type="file" multiple name="files"></p><p><!-- 按钮组 --><!-- 添加value可以指定字段，不添加value参数⾃动渲染系统默认的字段 --><input type="submit" value="注册" ><input type="button" value="返回"><input type="reset" value="重置"></p></form></body></html>注意事项：前端通过标签获取⽤户数据发送给后端的过程中标签需要有name属性，相当于字典的key；⽤户输⼊的数据会存储到标签的value属性中，相当于字典的value；如果是选择型标签需要⾃⾏加上name和value；数据的提交地址由form表单的action参数来控制action="URL"# 不写默认朝当前页⾯所在的地址提交method="数据的提交⽅式"⽅式：get post put delete patchform表单在提交数据的时候，如果含⽂件则需要指定两个固定参数：method='post'enctype="multipart/form-data"案例2：简易表单<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Hammer</title><style>form {/* 居中表单 */margin: 0 auto;width: 400px;/* 显⽰表单的轮廓 */padding: 1em;border: 1px solid #af2c2c;border-radius: 1em;}ul {list-style: none;padding: 0;margin: 0;}form li + li {margin-top: 1em;}label {/* 确保所有label⼤⼩相同并正确对齐 */display: inline-block;width: 90px;text-align: right;}input, textarea {/* 确保所有⽂本输⼊框字体相同textarea默认是等宽字体 */font: 1em sans-serif;/* 使所有⽂本输⼊框⼤⼩相同 */width: 300px;box-sizing: border-box;/* 调整⽂本输⼊框的边框样式 */border: 1px solid #999;}input:focus, textarea:focus {/* 给激活的元素⼀点⾼亮效果 */border-color: #000;}textarea {/* 使多⾏⽂本输⼊框和它们的label正确对齐 */vertical-align: top;/* 给⽂本留下⾜够的空间 */height: 5em;}.button {/* 把按钮放到和⽂本输⼊框⼀样的位置 */padding-left: 90px; /* 和label的⼤⼩⼀样 */}button {/* 这个外边距的⼤⼩与label和⽂本输⼊框之间的间距差不多 */margin-left: .5em;}</style></head><body><form action="/my-handling-form-page" method="post"><div><label for="name">Name:</label><input type="text" id="name" name="user_name"></div><div><label for="mail">E-mail:</label><input type="email" id="mail" name="user_email"></div><div><label for="msg">Message:</label><textarea id="msg" name="user_message"></textarea></div><div class="button"><button type="submit">Send your message</button></div><div><!-- <textarea>by default this element is filled with this text</textarea>--> </div></form></body></html>。
HTML5--新增表单元素属性事件（3）
HTML5--新增表单元素属性事件（3）前⾔： HTML5在原本已有表单元素的基础上新增了新的表单元素和属性，增强了表单元素的功能。
第⼀类.新增input(type)类型 1.type为email 作⽤：email 类型⽤于包含 email 地址的输⼊域。
特性：提供了默认电⼦邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满⾜验证，则会阻⽌当前的表单提交 email⽰例：如果内容不满⾜邮箱格式，提交表单会有错误提⽰信息。
<body><form action="#">邮箱:<input type="email"><input type="submit" value="提交"></form></body> 2.type为url 作⽤：url类型⽤于包含⽹址的输⼊域。
特性：提供了⽹址完整验证，只能输⼊合法的⽹址：必须包含http://(例:) url⽰例：如果内容不满⾜⽹址格式，提交表单会有错误提⽰信息。
<body><form action="#">⽹址:<input type="url"><input type="submit" value="提交"></form></body> 3.type为number 作⽤：number 类型⽤于包含数值的输⼊域。
特性：只能输⼊数字(包含⼩数点)，不能输⼊其它的字符 属性： max -- 限制输⼊框的最⼤值 min -- 限制输⼊框的最⼩值 value -- 输⼊框的默认值 step -- 规定数字增长间隔 number⽰例：输⼊框中只能输⼊number类型值，不能输⼊其他类型的值<form action="#">数量：<input type="number" value="60" max="100" min="0" step="3"><br><input type="submit" value="提交"></form> 4.type为search 作⽤：search 类型⽤于搜索域，⽐如站点搜索或 Google 搜索 特性：输⼊值后，输⼊框后带有关闭按钮可以清除输⼊框内容 search⽰例：<body><form action="#">请输⼊商品名称：<input type="search"> <br><input type="submit" value="提交"></form></body> 5.type为range 作⽤：range 类型⽤于包含⼀定范围内数字值的输⼊域(可以⽤作⾳量键) 特性：显⽰为滑动条 属性： max -- 允许的最⼤值 min -- 允许的最⼩值 value -- 规定的默认值 step -- 规定数字增长间隔 range⽰例：<body><form action="#">范围：<input type="range" max="100" min="0" value="50"> <br><input type="submit" value="提交"></form></body> 6.type为color 作⽤：输⼊类型⽤于规定颜⾊ 特性：该类型允许你从拾⾊器中选取颜⾊ color⽰例：<body><form action="#">颜⾊：<input type="color"> <br><input type="submit" value="提交"></form></body> 7.type为tel 作⽤：tel 输⼊类型⽤于包含电话号码的输⼊字段 特性：tel它并不是来实现验证。
网页设计第9章Dreamweaver的表格和网页版面设计PPT课件
9
9.1 网页中的表格
9.1.4.5 调整表格大小和外观 ▪ 调整表格宽度或高度：选择表格，拖动选择框右边
或底边的控制点。 ▪ 同时调整表格的高度和宽度：选择表格拖动选择框
右下角的控制点。 ▪ 若要精确指定表格大小：选定表格，在属性检查器
的“宽”和“高”文本框输入数值，在其后的下拉 列表框选择值的单位。 ▪ 在表格的属性检查器中可以设置表格的背景颜色、 背景图像、边框颜色等等属性。
进入布局模式。如图。 ▪ 在布局模式里，“插入”栏的“布局”中有两个可
用的按钮,它们是“布局表格”按钮和“绘制布局单 元格”按钮。此时，标准模式下的“表格”按钮和 “绘制层”按钮均呈不可用状态。（在标准模式下， “布局表格”按钮和“绘制布局单元格”按钮是不 可用的）。
16
9.2 用表格布局网页
17
9.2.3 绘制布局表格 ▪ 在布局模式下单击“插入”工具栏“布局”类别中的“布局
表格”按钮，然后将十字形指针移至工作区，按住鼠标左键 拖动，即可绘制出一个布局表格。按住Ctrl键可连续绘制出 多个布局表格。
18
9.2 用表格布局网页
9.2.4 更改布局表格和布局单元格的属性 设置布局表格的属性——使用布局表格的属性检查器。 如图:
dreamweaverdreamweaver的表格和网页版面设计的表格和网页版面设计表格在网页中的作用表格在网页中的作用表格的创建与编辑表格的创建与编辑利用表格对页面进行布局利用表格对页面进行布局利用布局试图对页面进行布局利用布局试图对页面进行布局dreamweaverdreamweaver中框架的创建方法中框架的创建方法超链接框架目标的指定超链接框架目标的指定框架和框架页的基本操作框架和框架页的基本操作9191网页中的表格网页中的表格表格是现代网页制作的一个重要组成部分
9.1 网页中的表格
9.1.4.5 调整表格大小和外观 ▪ 调整表格宽度或高度：选择表格，拖动选择框右边
或底边的控制点。 ▪ 同时调整表格的高度和宽度：选择表格拖动选择框
右下角的控制点。 ▪ 若要精确指定表格大小：选定表格，在属性检查器
的“宽”和“高”文本框输入数值，在其后的下拉 列表框选择值的单位。 ▪ 在表格的属性检查器中可以设置表格的背景颜色、 背景图像、边框颜色等等属性。
进入布局模式。如图。 ▪ 在布局模式里，“插入”栏的“布局”中有两个可
用的按钮,它们是“布局表格”按钮和“绘制布局单 元格”按钮。此时，标准模式下的“表格”按钮和 “绘制层”按钮均呈不可用状态。（在标准模式下， “布局表格”按钮和“绘制布局单元格”按钮是不 可用的）。
16
9.2 用表格布局网页
17
9.2.3 绘制布局表格 ▪ 在布局模式下单击“插入”工具栏“布局”类别中的“布局
表格”按钮，然后将十字形指针移至工作区，按住鼠标左键 拖动，即可绘制出一个布局表格。按住Ctrl键可连续绘制出 多个布局表格。
18
9.2 用表格布局网页
9.2.4 更改布局表格和布局单元格的属性 设置布局表格的属性——使用布局表格的属性检查器。 如图:
dreamweaverdreamweaver的表格和网页版面设计的表格和网页版面设计表格在网页中的作用表格在网页中的作用表格的创建与编辑表格的创建与编辑利用表格对页面进行布局利用表格对页面进行布局利用布局试图对页面进行布局利用布局试图对页面进行布局dreamweaverdreamweaver中框架的创建方法中框架的创建方法超链接框架目标的指定超链接框架目标的指定框架和框架页的基本操作框架和框架页的基本操作9191网页中的表格网页中的表格表格是现代网页制作的一个重要组成部分
html5 表格 style用法
HTML5 表格 style用法随着互联网的快速发展，网页设计和开发的技术也日新月异。
作为网页设计和开发的重要组成部分，HTML5语言在页面布局和样式设计上有着丰富的功能和特性。
其中，表格是网页中常见的元素之一，而对表格的样式定制，也是网页设计中的重要任务之一。
本文将介绍HTML5 中表格 style 的用法，帮助读者更好地掌握表格样式的定制技巧。
一、HTML5 表格的基本结构在介绍HTML5中表格的样式用法之前，首先需要了解HTML5中表格的基本结构。
HTML5中的表格通过`<table>`、 `<tr>`、`<td>`等标签来构建。
`<table>` 用于声明一个表格，`<tr>` 用于声明表格的行，`<td>` 用于声明每一行中的单元格。
例如：```html<table><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格4</td></tr></table>```以上代码中，`<table>`声明了一个表格，其中包含两行（`<tr>`），每行包含两个单元格（`<td>`）。
这是一个最基本的表格结构，接下来将介绍如何对这个表格进行样式的定制。
二、使用属性实现表格样式HTML5中，可以通过给表格的`<table>`、`<tr>`、`<td>`标签添加样式属性来改变表格的样式。
常用的表格样式属性包括：`border`、`background-color`、`text-align`、`width`等。
例如：1. 设置表格边框通过`border`属性可以设置表格的边框样式，包括边框宽度、颜色等。
HTML5表单及其验证
HTML5表单及其验证HTML表单⼀直都是Web的核⼼技术之⼀，有了它我们才能在Web上进⾏各种各样的应⽤。
HTML5 Forms新增了许多新控件及其API，⽅便我们做更复杂的应⽤，⽽不⽤借助其它Javascript框架，先说下表单的⼏个基本知识点：表单仍是以<form>元素作为容器，我们可在其中设置基本的提交特性；当⽤户提交页⾯时，表单仍然向服务器发送表单控件的值；之前⽼版本中的表单控件，如text radio checkbox等等，都可以按原有⽅式使⽤，尽管增加了新的功能；仍然可以使⽤javascript操作表单控件。
下⾯详细说下HTML5中表单新增功能1.输⼊型控件Input type⽤途说明email电⼦邮件地址⽂本框url⽹页URL⽂本框number数值的输⼊域属性值描述max number 规定允许的最⼤值min number 规定允许的最⼩值step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）value number 规定默认值range特定值的范围的数值，以滑动条显⽰属性值描述max number 规定允许的最⼤值min number 规定允许的最⼩值step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）value number 规定默认值Date pickers⽇期，时间选择器仅Opera9+⽀持，包含date, month, week, time, datetime,datetime-localsearch⽤于搜索引擎，⽐如在站点顶部显⽰的与普通⽂本框⽤法⼀样，只不过这样更语⽂化搜索框color颜⾊选择器仅Opera⽀持将原本type为text的input控件声明为以上特殊类型，是为了给⽤户呈现不同的输⼊界⾯（移动平台上⽀持这些不同的输⼊界⾯，这⾥就不细说），⽽且表单提交时会对其值做进⼀步的验证。
简述使用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表单元素学习要点： 1.表单元素总汇 2.表单元素解析⼀．表单元素总汇HTML5的表单中，提供了各种可供⽤户输⼊的表单控件。
元素名称 说明form 表⽰HTML表单input 表⽰⽤来收集⽤户输⼊数据的控件textarea 表⽰可以输⼊多⾏⽂本的控件select 表⽰⽤来提供⼀组固定的选项option 表⽰提供提供⼀个选项optgroup 表⽰⼀组相关的option元素button 表⽰可⽤来提交或重置的表单按钮（或⼀般按钮）datalist 定义⼀组提供给⽤户的建议值fieldset 表⽰⼀组表单元素legend 表⽰fieldset元素的说明性标签label 表⽰表单元素的说明标签output 表⽰计算结果⼆．表单元素解析1.<form>定义表单解释：<form>元素主要是定义本⾝是⼀组表单。
元素属性 说明 method 表⽰表单的发送⽅式：有POST和GET两种，默认GET，GET⽅式发送明码发送，在接收页⾯的url可以看到?表单元素名称=元素值 POST⽅式发送，为加密的发送，接收页⾯的url看不到表单信息action 表⽰表单提交的页⾯，也就是接收表单的页⾯ enctype 表⽰浏览器对发送给服务器的数据所采⽤的编码格式，只有上传我⽂件是才⽤到，multipart/form-data 有三种：application/x-www-form-urlencoded（默认编码，enctype 不能将⽂件上传到服务器）、 multipart/form-data （⽤于上传⽂件到服务器）、 text/plain （未规范的编码，不 建议使⽤，不同浏览器理解不同） name 设置表单名称，以便程序调⽤ target 设置提交时的⽬标位置：_blank、_parent、_self、_top， 也就是接收表单页⾯以什么⽅式打开，是新建页⾯打开，还是当前页⾯打开，默认当前页⾯打开autocomplete 设置浏览器记住⽤户输⼊的数据，实现⾃动完成表单。
HTML表单标签
HTML表单标签列表标签表格是⽤来显⽰数据的，那么列表就是⽤来布局的列表最⼤的特点就是整齐、整洁、有序，它作为布局会更加的⾃由和⽅便。
列表可以分为⽆序列表，有序列表，⾃定义列表。
⽆序列表ul标签表⽰HTML页⾯中项⽬的⽆序列表，⼀般会以项⽬符号呈现列表项，⽽列表项使⽤li标签定义。
基本语法<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>...</ul>各个列表项之间没有顺序之分。
ul标签⾥⾯只允许放⼊li标签。
但是li标签⾥⾯可以放⼊任何的元素。
有序列表字⾯理解就是对列表项元素进⾏排序啦我们使⽤ol标签定义有序列表，列表排序以数字来显⽰，并且使⽤li标签来定义列表项。
<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>...</ol>有序列表会⾃动给我们的列表项排序。
ol标签⾥⾯只允许放⼊li标签。
但是li标签⾥⾯可以放⼊任何的元素。
⾃定义列表⾃定义列表常⽤于对术语或者名词进⾏解释或者描述，⾃定义列表的列表项没有任何的项⽬符号。
语法格式使⽤dl标签⽤于定义描述列表或定义列表，该标签会与dt(定义项⽬/名字)和dd(描述每⼀个项⽬/名字)⼀起使⽤。
<dl><dt>名词1</dt><dd>名词解释1</dd><dd>名词解释2</dd></dl>dl⾥⾯只能包含dt标签。
dt和dd的个数没有限制，经常是⼀个dt对应多个dd。
表单标签表单的主要⽬的是⽤来收集⽤户信息。
在HTML中⼀个完整的表单通常由表单域，表单控件(也称为表单元素)和提⽰信息三个部分构成。
10款精美而实用的HTML5表单（登录、联系和搜索表单）
10款精美⽽实⽤的HTML5表单（登录、联系和搜索表单）1、HTML5/CSS3仿Facebook登录表单这款纯CSS3发光登录表单更是绚丽多彩。
今天我们要分享⼀款仿Facebook的登录表单，⽆论从外观还是功能上说，这款登录表单还是挺接近Facebook登录表单的。
2、CSS3可折叠显⽰的发光搜索表单这次要分享的⼀款CSS3表单是⼀款可折叠显⽰的发光搜索表单，搜索表单的输⼊框⼀开始由⼀层遮罩遮住的，并且是半透明的状态，当⿏标滑过输⼊框时，遮罩层即可缓缓展开，我们可以在搜索框中输⼊⽂字进⾏搜索。
3、CSS3数字验证表单 3D折叠验证提⽰今天我们要来分享⼀款效果很不错的CSS3数字验证表单，这款表单是⽤来验证输⼊的是否是合法数字的，并能给出相应的提⽰。
更重要的是这款CSS3数字验证表单的提⽰是以3D折叠框的形式，显得⾮常具有创意。
4、⾮常上档次的HTML5/CSS3登录表单今天我们要分享⼀款⾮常上档次的HTML5/CSS3登录表单，这款登录表单有⼀张⽤户的图⽚，输⼊框左侧有漂亮的⼩图标，同时，登录按钮也⾮常漂亮。
5、CSS3实现⼀款联系表单输⼊框带⼩图标今天我们再来分享⼀款外观还不错的CSS3联系表单，这款CSS3联系表单的输⼊框带有⼩图标，并且在提交信息时能校验输⼊的信息。
6、HTML5/CSS3简易联系表单扁平化风格这次要分享的⼀款HTML5/CSS3简易联系表单⾮常清新，整体外观不是那么华丽，但是表单扁平化的风格让⼈看了⾮常舒服，同时利⽤了HTML5元素的特性，表单的验证功能变得也相当简单。
7、CSS3响应式表单可切换表单主题这次要分享的⼀款CSS3响应式表单不仅美化了checkbox和Radiobox，⽽且也⾃定义美化了输⼊框、下拉框以及多项选择框，⼏乎所有的表单元素都美化了，⽽且整体上还不错。
另外，这款CSS3表单还可以切换主题，换⼀下表单风格也是不错的。
8、⾮常个性化的CSS3⾃定义checkbox和radiobox对于浏览器默认的checkbox和Radiobox样式实在是⽐较丑陋了，今天分享⼀款⾮常个性化的CSS3⾃定义checkbox和Radiobox，外观⾮常时尚。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2、option标签属性
属性 selected value
说明 是否选中 选项值
练习题
一、单选题
1、大多数表单元素都是使用（ ）标签，然后通过type属性指定表单类型。
A. input
B. textarea
C. select
D.option
2、下面表单元素中，有value属性的是（ ）。
A. 单选框 B.复选框
9.2 form标签
• 我们常说的表单，指的是文本框、按钮、单选框、复选 框、下拉列表等的统称。
• 创建一个表单，就像创建一个表格，我们也必须要把所 有表单标签放在form标签内部。
• 表单跟表格，这是完全不一样的概念
属性 name method action target enctype
form标签属性
9.5 密码文本框
• 密码文本框看成是一种特殊的单行文本框。
• 在单行文本框中输入的字符可见，而在密码文本框中输 入的字符不可见。
• 语法：
<input type="password" />
• 常用属性：
属性 value size maxlength
说明 设置文本框的默认值 设置文本框的长度 设置文本框最多可以输入的字符数
4、如果想要定义单选框默认选中效果，可以使用（ ）属性来实现。
A. checked B.selected
C.type
D.以上都不是
5、在表单中，input元素的type属性取值为（ ）时，用于创建重置按钮。
A. reset
B. set
C. button
D.submit
6、下面有关表单的说法，正确的是（ ）。 A. 表单其实就是表格，两者是一样的 B. 下拉列表不属于表单，而是属于列表的一种 C. 在表单中，group属性一般用于单选框和复选框分组 D. 在表单中，value属性一般是为了方便JavaScript或服务器操作数据用的
9.6 单选框
• 语法：
<input type="radio" name="组名" value="取值" checked/>
• name属性表示单选框所在的组名（忽略点） • value属性表示单选框的取值 • checked属性表示选中某一个选项
【疑问】：对于单选框，加上value与没加上好像没啥区别啊？ 为啥还加上呢？
列表项符号 表单名称 提交方式 提交地址 打开方式 编码方式
9.3 input标签
• 在HTML中，大多数表单都是使用input标签来实现的。
type属性取值
9.4 单行文本框
• 语法Βιβλιοθήκη <input type="text" />
• 常用属性：
属性 value size maxlength
说明 设置文本框的默认值 设置文本框的长度 设置文本框最多可以输入的字符数
第9章 表单
教学重点
➢ 掌握form标签 ➢ 掌握常见表单
9.1 表单简介
• 表单最重要的作用就是：在浏览器端收集用户的信息，然后将 数据提交给服务器来处理。
• 学习表单只需要把页面效果做出来就可以，不需要管数据处理 • 常见表单标签有5种：form、input、textarea、select和option
value属性取值一般跟后面的文本相同，之所以加上 value属 性，是为了方便JavaScript或者服务器操作数据用的。 所有表单元素的value属性的作用都是一样的。
9.7 复选框
• 语法：
<input type="checkbox" name="组名" value="取值" />
• name属性表示复选框所在的组名（忽略点） • value属性表示复选框的取值 • checked属性表示选中某一个选项
7、下面对于按钮的说法，不正确的是（ ）。 A. 普通按钮一般情况下都是配合JavaScript来进行各种操作的； B. 提交按钮一般都是用来给服务器提交数据的； C. 重置按钮一般用来清除用户在表单中输入的内容 D. 表单中的按钮更多的是使用button标签来实现
二、编程题 使用这一章学到的表单标签，制作下图所示的表单页面。
C.下拉列表 D.以上都是
3、单行文本框使用（ ）实现，密码文本框使用（ ）实现，多行文本框 使用（ ）实现。
A. <textarea></textarea>
B.<input type="texarea" />
C. <input type="text" />
D.<input type="password" />
9.8 按钮
• 在HTML中，常见的按钮有3种：①普通按钮button；②提 交按钮submit；③重置按钮reset。
➢ 普通按钮：<input type="button" value="取值" /> ➢ 提交按钮：<input type="submit" value="取值" /> ➢ 重置按钮：<input type="reset" value="取值" />
9.11 下拉列表
• 下拉列表由select和option这2个标签配合使用来表示
• 语法：
<select> <option>选项内容</option> …… <option>选项内容</option>
</select>
1、select标签属性
属性 multiple size
说明 设置下拉列表可以选择多项 设置下拉列表显示几个列表项
• 在实际开发中，button标签比较少用
9.9 文件上传
• 语法：
<input type="file" />
• 如果想要实现文件上传的真正功能，需要借助后端技术
9.10 多行文本框
• 多行文本框使用的是textarea标签，而不是input标签。 • 语法：
<input type="checkbox" name="组名" value="取值" />