HTML5表格和表单
来源：互联网 发布：开票软件金税盘未响应 编辑：程序博客网 时间：2024/06/06 04:03
表格：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格</title></head><body><!-- 表格 table 表格的行：tr 每行中的列：td 表格的标题：<th></th> 默认加粗，单元格居中 表格头:caption [常用属性] 1、border:给表格添加边框。 当border属性增大时，只有外围框线增加，单元格的边框始终为1px 2、bordercolor="blue" 边框颜色 3、Width、 Height：表格的宽高 4、Cellspacing：单元格与单元格之间的间隙距离。 当cellspacing="0"，只会使单元格间隙为0，但不会合并边框线。 表格边框合并：style="border-collapse: collapse;", 无需再写cellspacing="0" 5、Cellpadding：每个单元格中的内容与边框线的距离。 6、align：表格在屏幕的左中右位置显示，left center right 注意：给表格加上align属性，相当于让表格浮动。 会直接打破表格后面元素的原有排列方式 7、bgcolor:背景色 等同于style="background-color:;" 8、background: background="img/computer.jpg"设置背景图片 等同于style="background-image:;" 且背景图会覆盖背景色--><!--【tr和td相关的属性】 1、width/height: 单元格的宽高 2、bgcolor:单元格的背景颜色 3、align: left center right 单元格中的文字，水平对齐方式 4、valign:top center bottom 单元格中的文字，垂直对齐方式 5、nowrap="nowrap" 单元格中文字不换行 注意：1、当表格属性与行列属性冲突时，以行列属性为准。（近者优先,就近原则） 2、表格的align属性，是控制表格自身在浏览器的显示位置； 行和列的align属性，是控制单元格中文字在单元格中的对齐方式； 3、表格的align属性，并不影响表格内，文字的水平对齐方式 tr的align或者valign属性，可以控制一行中所有单元格的水平或者垂直对齐方式--><table border="10" bordercolor="red" width="500px" height="150px" style="border-collapse:collapse;background-image: url('../../img/lenovo2.jpg'); background-size:100% 100%;" bgcolor="yellow" cellspacing="0" cellpadding="10px" align="center"> <tr align="center" valign="top"> <td style="border-collapse:collapse;background-image: url('../../img/lenovo2.jpg'); background-size:100% 100%;">手机充值</td> <td>IP卡</td> <td>网友</td> </tr> <tr> <td>移动</td> <td>联通</td> <td>魔兽</td> </tr></table><br><!--[表格的跨行与跨列]---tdcolspan 跨列，当某个格跨N列时，其右边N-1个单元格需删除rowspan 跨行，当某个格跨N行时，其下方N-1个单元格需删除--><table border="1" align="center"> <caption>我是表格标题！！！</caption> <tr> <td>第一行第一列</td> <td colspan="3">第一行第二列</td> </tr> <tr> <td rowspan="3">第二行跨三行</td> <td>第二行第二列</td> <td>第二行第三列</td> <td>第二行第四列</td> </tr> <tr> <td>第三行</td> <td>第三行</td> <td>第三行</td> </tr> <tr> <td>第四行</td> <td>第四行</td> <td>第四行</td> </tr></table><!--【表格的结构化】完整表格结构：caption thead tbody tfoot无论各部分在表格什么位置，显示时，caption均在表格外最上方，thead均会在表格内最上方，tfoot均会在最下方。【表格的直列化】<colgroup style="background-color: yellow;"> 前两列为一组<col /> 第一列<col /> 第二列</colgroup><col style="background-color: blue;"/> 第三列【优点】 1：语义化：看到标签能明白包含的内容 2：便于浏览器搜索。 3：可以调整书写顺序实现某些部分的优先展示，而不打乱显示顺序。--><br><table width="500" align="center"> <colgroup style="background-color: red"> <!--前两列为一组--> <col/> <!--第一列--> </colgroup> <colgroup style="background-color: yellow"> <col/> <!--第二列--> <col/> <!--第三列--> </colgroup> <caption>表格标题</caption> <thead> <tr> <th>头1</th> <th>头2</th> <th>头3</th> </tr> </thead> <tbody> <tr> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td>222</td> <td>222</td> <td>222</td> </tr> </tbody> <tbody> <tr> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td>222</td> <td>222</td> <td>222</td> </tr> </tbody> <tfoot > <tr> <td>尾1</td> <td>尾2</td> <td>尾3</td> </tr> </tfoot></table></body></html>表单：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Form表单</title></head><body><!--【form表单】 1、两个重要属性：action-表单提交的服务器地址 method-表单提交数据的方法（get/post） 2、get和post的区别： get：使用URL传参： http://服务器地址?name1=value1&name2=value2 (?表示传递参数，?后面采用name=value的形式传递，多个参数之间，用&链接) URL传参不安全，所有信息可在地址栏看到，并且可以通过地址栏随意传递其他数据。 URL传递数据量有限，只能传递少量数据。 POST：使用http请求传递数据。URL地址栏不可见，比较安全。且传递数据量没有限制。 3、【input常用属性】 type:表示input输入框的类型。 name:input输入框的别名。一般情况下，必填。因为，传递数据时，使用name=value的形式传递 value:input输入框的默认值。 placeholder：input的提示内容，当输入框用value的时候，提示内容消失。 （了解）tabindex="1" 控制点击tab键时的跳转顺序，从最小的开始，逐个往大的数值跳转 获得焦点。 【input特殊属性】 checked="checked" 默认选中。 disabled="disabled" 设置控件不能使用。用在按钮上不能点击，用在输入框上不能修改。 而且，如果输入框disabled，则输入框信息不能往后台传递。 hidden="hidden" 隐藏。等同于<input type="hidden" name="username" value="1234" /> 常用于配合disabled，或根据其他需要，使用隐藏域传递数据。 4：【input-type属性详解】 text：文本输入框 password：密码输入框，输入内容时显示小黑点。 radio：单选按钮。 checkbox:复选按钮。 >>> name和value属性需同时存在，提交时，提交的是value中的属性值。 例如：<input type="radio" name="sex" value="男"/> 提交时，显示“sex=男” >>> radio凭借name属性区分是否为同一组。name相同，为同组，同组中只能选择一个。 >>> checked="checked" 默认选中。（radio只能选一个，checkbox可以选多个） file:文件上传按钮。 submit：提交按钮。提交表单数据。 reset：重置按钮。将表单数据重置为初始状态。 image：图形提交按钮。功能同submit，可以提交数据。 button：普通按钮。没有任何功能 5、【下拉选择控件 select】 写法：<select> <option></option> //可以有N多个 </select> name属性，应该写在<select>上，所有选项只有一个name multiple="multiple" 设置select控件为多选，可在界面使用Ctrl+鼠标，进行多选。一般不用。 option常用属性： value="":当option没有value属性时，往后台传递的是<option></option>标签中的文字； 当option有value属性时，往后台传递的是value属性的值。 title="":鼠标指上后显示的文字。 selected="selected":默认选中。 <optgroup label="山东省"></optgroup> :用于将option标签进行分组，label属性表示分组名。 6: 【文本域 textarea】 写法：<textarea></textarea> 设置宽高style="width: 200px; height: 150px;" 自身有cols="" rows=""两个属性，但不常用 readonly="readonly" 设置为只读模式，不允许编辑。 style="resize: none;" 设置为宽高不允许修改。 style="overflow: ;" 设置当文字超出区域时，如何处理。 >>> 也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。 >>> 常用属性值:hidden 超出区域的文字，隐藏无法显示 scroll 无论文字多少，均会显示滚动 auto自动，根据文字多少自动决定是否显示滚动条（默认样式） 7: 【表单的边框与标题】 <fieldset> //表单边框 <legend>联系方式</legend> 表单标题 </fieldset> >>>如果想要让标题嵌入到边框中，需将标题标签写到边框标签里面。 >>>一个表单，可以有多组边框+标题的组合。 8: 【HTML5 智能表单】 H5新增input的form属性，用于指向特定form表单的id，实现input无需放在form标签之中，即可通过表单进行提交。 <FORM id=foo> … </FORM> <INPUT … form="foo"> type新增属性：详见表格 email、URL、date、time、month、week、number、range、color input元素的新增属性： Autocomplete：自动完成功能.记录用户之前输入的内容，并在下次输入时自动提示完成输入。 >>> 属性值： on/off >>> 可以在form表单上使用，对整张表单的所有控件进行自动完成的开关 也可以在input上使用，对特定输入框进行修改。 >>> 绝大部分浏览器，默认开启。 Autofocus：自动获得焦点. autofocus="autofocus",只能设置input元素自动获得焦点。 Form：所属表单。通过form表单的id，确定此input输入哪张表单。 Required：必填.required="required" 设置input必填，否则阻止提交。 Pattern：使用正则表达式验证input的模式（后续讲解） Placeholder：提示内容，当有value时，取消提示。--><input type="color" name="test" form="form1" /><form action="Test.html" method="get" id="form1" autocomplete="off"> <fieldset> <legend>用户注册</legend> <table> <tr> <td>用户名</td> <td> <input type="text" name="username" placeholder="请输入用户名" value="1234" tabindex="1" autocomplete="on" autofocus="autofocus" required="required"/> <!--<input type="hidden" name="username" value="1234" />--> </td> </tr> <tr> <td>密码</td> <td> <input type="password" name="password" placeholder="请输入密码"/> </td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="sex" value="男" checked="checked"/>男 <input type="radio" name="sex" value="女"/>女 </td> </tr> <tr> <td>兴趣</td> <td> <input type="checkbox" name="hobby" value="吃" checked="checked"/>吃 <input type="checkbox" name="hobby" value="喝"/>喝 <input type="checkbox" name="hobby" value="玩" checked="checked"/>玩 <input type="checkbox" name="hobby" value="乐"/>喝 </td> </tr> <tr> <td>头像</td> <td> <input type="file" name="head" tabindex="2" /> </td> </tr> <tr> <td>城市</td> <td> <select name="city"> <optgroup label="山东省"> <option value="1" title="">青岛</option> <option value="2" selected="selected">烟台</option> <option value="3">济南</option> </optgroup> <optgroup label="北京市"> <option>海淀区</option> <option>朝阳区</option> </optgroup> </select> </td> </tr> <tr> <td>服务协议</td> </tr> <tr> <td colspan="2"> <textarea style="width: 230px; height: 100px; resize: none; overflow-y: scroll;" readonly="readonly" tabindex="3">这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！ </textarea> </td> </tr> <tr> <td> <input type="submit" value="注册" tabindex="4" /> </td> <td> <input type="reset" value="重置" /> </td> </tr> </table> </fieldset></form></body></html>效果图：
0 0
- HTML5表格和表单
- HTML5 表格和表单
- ASP表格和表单
- HTML表格和表单
- form表单和表格
- HTML表格和表单
- html-表格和表单
- 表格和表单
- 表格和表单
- HTML5表格和布局
- html5视频和表单
- html的表格和表单
- Bootstrap3 之表格和表单
- HTML表格，表单和框架
- html 表格和表单知识点
- HTML中的表格和表单
- Html表单和表格例子
- HTML5样式、链接和表格
- CSS：如何让元素在页面中水平垂直居中？
- JNOJ period
- 翻转二叉树
- Docker基础原理
- 笔试&面试算法题汇总
- HTML5表格和表单
- 【Maven】什么是Maven以及其生命周期
- JavaScript 中的 Function.prototype.bind
- ISE调用Notepad++的方法
- 【Unity3D UGUI】事件接口（三） 按下移动、释放
- 没有IP地址的主机如何保持IP层联通
- 冒泡排序【改进】
- python装饰器使用例子
- 337. House Robber III
