HTML5+CSS3 ——【笔记】5、表单和表格（完结）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>5、表单和表格</title> </head> <body> <!-- <xmp><h1></xmp>能让标签不转义的标签 --> 一、 表格 (一)创建表单 <!-- 语法格式: <table> <tr> <td>单元格内的文字</td> </tr> </table> 一个表格<table>、<tr>、<td>三个标签缺一不可。其中table表示表格的开始 与结束，tr表示表格的行数,tr标签内有几个td即表示该行有几列 --> eg: <body> <table> <tr> <td>名字</td> <td>科目</td> <td>分数</td> </tr> <tr> <td>李四</td> <td>数学</td> <td>130</td> </tr> </table> <table border="1"> <tr> <td>名字</td> <td>科目</td> <td>分数</td> </tr> <tr> <td>张三</td> <td>数学</td> <td>116</td> </tr> </table> </body> <!-- 以上两个表格,一个设置了border边框属性，一个没有设置 默认情况下,表格边框为0,高和宽有表格内容来支撑 td标签就像一个容器,可容纳所用标签,甚至可以嵌套table标签 --> (二)<table>标签的属性 <!-- 用于控制表格[整体]显示样式的HTML语言属性,但大多数属性可以使用CSS进行代替 属性: 常用属性值 border:设置表格边框(默认为0) 像素 cellspacing:设置单元格之间的空间 像素(默认为2) cellpadding:设置内容与单元格之间的空间 像素(默认为1) width:设置表格的宽度 像素 height:设置表格的高度 像素 align:设置表格在网页中的对齐方式 left、center、right bgcolor:设置表格的背景颜色 预定义的颜色值、十六进制#RGB、rgb(r,g,b) background:设置表格的背景图像 url地址 1.border 控制表格外边框和双线边框，当属性值大于1时双线边框不会再增大，只会改变外边框 --> (三)tr标签的属性 <!-- table控制表格整体显示样式，tr控制某一行特殊显示 属性: 常用属性值 height:设置高度 像素 align设置一行内容的对齐方式 left、center、right valign:设置一行内容的垂直对齐方式 top、middle、botton bgcolor:设置行背景颜色 预定义的颜色值、十六进制#RGB、rgb(r,g,b) background:设置行背景图片 url地址 --> eg: <body> <table border="1" width="400" height="240" align="cennter"> <tr height="80" align="center" valign="top" bgcolor="#00CCFF"> <td>姓名</td> <td>性别</td> <td>科目</td> <td>分数</td> </tr> <tr> <td>郑老</td> <td>男</td> <td>java</td> <td>98</td> </tr> <tr> <td>林老</td> <td>男</td> <td>软件测试</td> <td>95</td> </tr> <tr> <td>熊老</td> <td>男</td> <td>java</td> <td>59</td> </tr> </table> </body> (四)td标签的属性 <!-- tr标签控制表格中的一行显示样式，td标签内嵌于tr标签内能达到对某一个单元格进行控制 常用属性: 常用属性值 width:设置单元格宽度 像素 height:设置单元格高度 像素 align:设置单元格内容的水平对齐方式 left、center、right bgcolor:设置表格的背景颜色 预定义的颜色值、十六进制#RGB、rgb(r,g,b) background:设置表格的背景图像 url地址 colspan:设置单元格横跨的列数(合并水平方向单元格) 正整数 rowspan:设置单元格竖跨的行数(合并竖直方向单元格) 正整数 --> eg: <body> <table border="1" width="400" height="240" align="cennter"> <tr height="80" align="center" valign="top" bgcolor="#00CCFF"> <td>姓名</td> <td>性别</td> <td>电话</td> <td>住址</td> </tr> <tr> <td>小王</td> <td>女</td> <td>112233</td> <td rowspan="3">海淀</td> </tr> <tr> <td>小李</td> <td>男</td> <td>5566677</td> </tr> <tr> <td>小张</td> <td>男</td> <td>787798</td> </table> </body> (五)th标签及其属性 <!-- 设置表格的表头，使格式更加清晰 用th标签代替相应td标签即可 用法与td标签相同，语义不同，th标签文本默认居中加粗 --> (六)表格的结构 <!-- ...很久以前用表格进行网页布局把表格分为头部、主体、页脚 <thead></thead>:用于定义表格头部,必须位于<table></table>标签中 <tfoot></tfoot>:用于定义表格页脚,位于<table></table>中,<thead></thead>标签之后 <tbody></tbody>:用于定义表格主体,位于<table></table>中，<tfoot></tfoot>标签之后 --> eg: <body> <table width="600" border="1" cellspacing="0" align="center"> <caption>表格的名称</caption> <!-- caption定义表格的标题 --> <thead> <tr> <td colspan="3">网站logo</td> </tr> <tr> <th><a href="#">首页</a></th> <th><a href="#">关于我们</a></th> <th><a href="#">联系我们</a></th> </tr> </thead> <tfoot> <tr> <td colspan="3" align="center">底部的基本企业信息©【版权信息】</td> </tr> </tfoot> <tbody> <tr height="150"> <td>主体的左栏</td> <td>主体的中间</td> <td>主体的右侧</td> </tr> <tr height="150"> <td>主体的左栏</td> <td>主体的中间</td> <td>主体的右侧</td> </tr> </tbody> </table> </body> 二、CSS控制表格样式 (一)CSS控制表格边框 <!-- <th>和<td>标签可以用padding对其应用内边距属性,其无外边距margin属性 或对<table>标签应用HTML标签属性cellpadding. <tr>标签也无padding和margin属性 --> (二)CSS控制单元格的高和宽 <!-- CSS的width和height属性可控制单元格的宽和高; 对同一行或同一列中单元格定义不同高度,最终的宽度或高度取其所在行或列中较大者 --> eg: <head> <style type="text/css"> .t1,.one,.two,.three{border: 1px solid #30F;} .one{width: 10px;height: 80px;} .two{width: 50px;height: 80px;} .three{width:70px;height: 80px;} </style> </head> <body> <table> <tr class="t1"> <td class="one">A房间</td> <td class="two">B房间</td> </tr> <tr class="t1"> <td class="three">C房间</td> <td class="two">D房间</td> </tr> </table> </body> 三、表单 <!-- 接收用户数据的平台,如注册页面、网上订货页. --> (一)表单的构成 表单控件(文本框、按钮等)、提示信息、表单域(容纳表单控件和提示信息的容器) (二)创建表单 <form></form>标签被用于定义表单域(容器) <!-- 语法格式: <form action="url地址" method="提交方式" name="表单名称">各种表单控件</form> 各属性 1、action属性 指定接收并处理表单数据的服务器程序的url地址;提交数据时表单数据会传送到指定页面处理 属性值可为相对路径或绝对路径,还可以是E-mail邮箱(提交表单以邮箱形式传递出去). 2、method属性 设置表单提交方式 属性值: get(默认,保密性差、有数据量限制)、post(保密性好、无数据量限制) 3、name属性 --> 四、表单控件 (一)input控件 <!-- 如输入框、提交按钮等元素 语法格式: <input type="控件类型"> type为其最基本属性 常用属性值: type="text"---单行文本输入 type="reset"---重置按钮 type="password"---密码输入框 type="image"---图像形式的提交按钮 type="radio"---单选按钮 type="hidden"---隐藏域 type="checkbox"---复选框 type="file"---文件域 type="button"---普通按钮 type="submit"---提交按钮 其他属性 属性---属性值---描述 name---用户定义---控件名称 value--用户定义---input中默认文本值 size---正整数---input控件在页面中显示宽度 readonly---readonly---该控件内容为只读(不能编辑修改) disabled---disabled---第一次加载页面时禁用该控件(显示为灰色) checked---checked---定义选择控件默认被选中项 maxlength---正整数---控件允许输入的最多字符数 --> eg： <form action="#" method="POST"> 用户名: <!-- 单行文本输入框 --> <input type="text" value="张三" maxlength="6"/> <br/><br> 密码: <!-- 密码输入框 --> <input type="password" size="40" /> <br/><br/> 性别: <!-- radio单选按钮 --> <input type="radio" name="sex" checked="checked" />男 <input type="radio" name="sex" />女 <br /><br /> 兴趣: <!-- 复选框 --> <input type="checkbox" />唱歌 <input type="checkbox" />跳舞 <input type="checkbox" />游泳 <br/><br/> 上传头像: <input type="file"/> <br><br> <!-- 文件域 --> <input type="submit"/> <!-- 提交按钮 --> <input type="reset"/> <!-- 重置按钮 --> <input type="button" value="普通按钮"> <!-- 普通按钮 --> <input type="image" src="http://127.0.0.1:8848/htmlcode/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/1/static/logo.png"/> <!-- 图像域 --> <input type="hidden"/> <!-- 隐藏域 --> </form> (二)textarea控件 <!-- input控件只能创建单行文本输入框,而textarea控件能创建输入多行文本输入框, 如留言板 语法格式: <textarea name="" id="" cols="每行中字符数" rows="显示的行数">文本内容</textarea> 其中,cols、rows为必备属性,其他为可选属性(cols、rows各浏览器显示效果有差异,常使用width、height来定义输入框的宽高) name(控件名称):用户自定义 readonly(该控件为只读):readonly disabled(第一次加载该页面时禁用该控件):disabled --> eg:(评论区) <form action="#" method="POST"> 评论:<br /> <textarea name="" id="" cols="60" rows="5"> 评论时需要遵纪守法,语言文明 </textarea><br/> <input type="submit" value="提交"/> </form> (三)select控件 下拉菜单控件 语法格式: <select name="" id="" > <option value="">选项1</option> <option value="">选项2</option> <option value="">选项3</option> </select> <!-- select标签中常用属性 size:下拉菜单的可见选项数(取值正整数) multiple:定义multiple="multiple"时,下拉菜单具有多项选择的功能,按住【ctrl】键的同时技能同时选择多项 option标签常用属性 selected:定义selected="selected"时,当前项为默认选中项 *生成表单控件可通过工具快速生成,不必死记控件代码. --> 五、HTML5新属性 更高效地制作标准Web表单 (一)全新的form属性 <!-- 新增autocomplete和novalidate属性 1、autocomplete属性 指定表单是/否有自动完成功能;即表单控件输入的内容记录下来,再次输入时, 会将历史输入显示在下拉列表;如浏览器搜索框的下拉历史搜索 autocomplete不仅能用于form标签,还能用于所有输入类型input标签 属性值 on:有自动完成功能; off:无自动完成功能 2、novalidate属性 指定在提交表单时取消对表单进行有效的检查。 取值为其本身 --> (二)全新的表单控件 <!-- datalist、keygen等元素可强化表单功能. datalist定义输入框选项列表 --> eg: <form action="#" method="post"> 请输入用户名:<input type="text" list="namelist"/> <datalist id="namelist"> <option >admin</option> <option >lucy</option> <option >lily</option> </datalist> <input type="submit" value="提交"> </form> (三)全新的input控件类型 丰富表单功能,更好实现表单控制和验证 <!-- 1、email类型<input type="email"/> 专门用于输入E-mail地址的文本输入框,用来验证内容是否符合邮箱地址格式. 2、url类型<input type="url"/> 用于输入url地址的文本框,若输入内容是url地址则提交到服务器, 若不符url地址格式,则不允许提交并提升;如浏览器网址搜索栏 3、tel类型<input type="tel"/> 用于提供输入电话号码的文本框,由于电话格式的多样性,故tel类型通常会与pattern属性 配合使用. 4、search类型<input type="search"/> 专门用于输入搜索关键词的文本框,能自动记录一些字符. 如网站搜索内容后,右侧会有一个删除图标,单击能快速清除内容 5、color类型<input type="color"> 用于提供设置颜色的文本框,用于实现一个RGB颜色输入,其默认值为#000000 可通过value属性值更改颜色,color类型文本框单击能打开拾色板可视化选取一种颜色. --> eg: <form action="#" method="get"> 请输入邮箱:<input type="email" name="formmail"> <br/> 请输入网址:<input type="url" name="formmail"> <br/> 请输入电话号码:<input type="tel" name="formmail"> <br/> 请输入搜索关键词:<input type="search" name="formmail"> <br/> 请选取一种颜色:<input type="color" name="formmail"> <br/> <input type="color" name="color2" value="#FF3E96"> <input type="submit" value="提交"> </form> 6、number类型<input type="number"> <!-- 用于提供输入数值的文本框,提交表单时会自动检查该输入框中内容是否为数字. 可对输入数字进行限制,其属性说明: value:指定输入框默认值; max:指定可接受最大输入值; min:指定可接受最小输入值; step:输入域合法的间隔,若不设置默认为1; --> eg： <form action="#" method="get"> 请输入数值:<input type="number" name="number1" value="1" min="1" max="20" step="4"> <br/> <input type="submit" value="提交" /> </form> 7、range类型<input type="range"> 提供一定范围内数值的输入范围,在网页中显示为滑动条. 与number属性一样有min、max、step等属性 8、Date pickers类型<input type="date/month/week···"> <!-- 指时间日期类型性,提供多个可供选取日期时间的输入类型,用于验证输入的日期. 时间日期类型----说明 date---选取日、月、年 month---选取月、年 week---选取周和年 time---选取时间(小时和分钟) datetime---选取时间、日、月、年(UTC时间[世界标准时间]) datetime-local---选取时间、日、月、年(本地时间) --> eg: <form action="#" method="get"> <input type="date"/> <input type="month"/> <input type="week"/> <input type="time"/> <input type="datetime"/> <input type="datetime-local"/> <input type="submit" value="提交" /> </form> (四)全新的input控件属性 指定输入类型的行为和限制,列如autofocus、min、max、pattern等. 1、autofocus属性 <!-- 指定页面加载后是否自动获取焦点,将标签属性值指定为true时, 表页面加载完毕后会自动获取该焦点(或理解为跳转至该焦点). eg: <form action="#" method="get"> 请输入关键词:<input type="text" name="user_name" autocomplete="off" autofocus="true"/><br/> <input type="submit" value="提交"/> </form> --> 2、form属性 <!-- 表单子元素可写form标签以外,但这个元素指定form属性并设置属性值为该表单id, 则这个元素属于表单的一部分 --> eg: <form action="#" method="get" id="user_form"> 请输入你的姓名:<input type="text" name="first_name"> <input type="submit" value="提交"/> </form> <p>下面输入框在form元素外,但指定了form属性为表单的id,<br> 所以输入框内容属于表单的一部分</p> 请输入您的昵称:<input type="text" name="last_name" form="user_form"/><br> 3、list属性 <!-- datalist元素实现数据列表下拉效果,而list属性用于 指定输入框所绑定的datalist元素,其值是某个datalist元素的id。 --> eg： <form action="#" method="get"> 请输入网址:<input type="url" list="url_list" name="weburl"/> <datalist id="url_list"> <option label="新浪" value="http://www.sina.com.cn"></option> <option label="搜狐" value="http://www.sohu.com"></option> <option label="传智" value="http://www/itcase.cn"></option> </datalist> <input type="submit" value="提交"> </form> 4、multiple属性 <!-- 指定输入框可以选择多个值 如用于email属性,表可输入多个E-mail地址,用逗号隔开即可; 用于file属性时,表可选择多个文件. --> 5、min、max和step属性 <!-- 用于为包含数字或日期的input输入类型规定限制,即加一个数值的约束. max:允许输入最大值 min:允许输入最小值 step:规定输入框合法的数字间隔,不设置默认为1 --> 6、pattern属性 <!-- 用于验证input类型输入框中用户输入的内容是否与所定义的正则表达式相匹配(即表单验证) pattern适用的类型是:text、search、url、tel、email和password和<input />标签。 常用正则表达式: 正则表达式-----------------说明 ^[0-9]*$-----------------数字 ^\d{n}$-----------------n位的数字 ^\d{n,}$-----------------至少n位的数字 ^\d{m,n}$-----------------零和非零开头的数字 ^([1-9][0-9]*)+(.[0-9]{1,2})?$----非零开头的最多带两位小数的数字 ^(\-|\+)?\d+(\.\d+)?$-------------整数、负数、和小数 ^\d+$或^[1-9]\d*|0$---------------非负整数 ^-[1-9]\d*|0$或^((-\d+)|(0+))$----非正整数 ^[\u4e00-\u9fa5]{0,}$-------------汉字 ^[A-Za-z0-9]+$或^[A-Za-z0-9]{4,40}$----英文和数字 ^[A-Za-z]+$--------------由26个英文字母组成的字符串 ^[A-Za-z0-9]+$-----------由数字和26个英文字母组成的字符串 ^\w+$或^\w[3,20]$--------由数字、26个英文字母或者下画线组成的字符串 ^[\u4E00-\u9FA5A-Za-z0-9_]+$---中文、英文、数字、包括下画线 ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.])\w+)*$---email地址 [a-zA-Z]+://[^\s]*或^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$---URL地址 ^\d{15}|\d{18}$---------身份证号(15、18位数字) ^([0-9]){7,18}(x|X)?$或^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$---以数字、字母x结尾的短身份证号码 ^[a-zA-Z][a-zA-Z0-9_]{4,15}$---账号是否合法(以字母开头、长度在5-16字节,允许字母数字、下画线) ^[a-zA-Z]\w{5,17}$-------------密码(以字母开头,长度在6~18之间,只能包含字母、数字和下画线) --> eg: <form action="#" method="get"> 账号: <input type="text" name="username" pattern="[a-zA-Z][a-zA-Z0-9_]{4,15}$" />(以字母开头,长度在5~16字节,允许字母、数字、下画线)<br/> 密码:<input type="password" name="pwd" pattern="^[a-zA-Z]\w{5,17}$" />(以字母开头,长度在6~18之间,只能包含字母、数字和下画线)<br/> 身份证号:<input type="text" name="mycard" pattern="^\d{15}|\d{18}$" />(15位、18位数字) Email地址:<input type="email" name="myemail" pattern="^\w+([-+.]\w)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" /> <input type="submit" value="提交" /> </form> 7、placeholder属性 用于为input类型的输入框提供相关提示信息,如QQ登录框里的"QQ账号"提示信息 8、required属性 用于判断用户是否在表单输入框中输入内容,当表单为空时不允许提交表单. eg(7/8): <form action="#" method="get"> 请输入姓名:<input type="text" name="user_name" required="required" placeholder="设置您的名字" /> <input type="submit" value="提交" /> </form> 六、CSS控制表单样式 即为表单设置样式使其更加美观;如为表单、文本框添加背景颜色、设置文本样式等。 </body> </html>
