一、（3）HTML表单与表格-综合应用
HTML表单与表格-综合应用
一、表格 table （了解）
表格标签（重点）
基本结构标签:
- <table> ：定义表格
- <tr> ：定义表格的行
- <td> ：定义表格中的单元格
- <th> ：定义表格中的表头单元格
- <thead> ：定义表格中的表头内容
- <tbody> ：定义表格中的主体内容
- <tfoot> ：定义表格中的表注内容（脚注）
- <caption>：定义表格标题
基本结构：
<table 属性="属性值"> <tr><td></td></tr> <tr><td></td></tr> </table>
表格的组成：固定的列与可变的行组成
- table(表格)
- tr(行)
- td(列)
- th(表头使用)
| 属性 | 值 | 描述 | DTD |
| align | *left *center *right |
不赞成使用，请使用样式代替，规定表格相对周围元素的对齐方式 | TF |
| bgcolor | *rgb(x,x,x) *#xxxxxx *colorname |
不赞成使用。请使用样式代替。规定表格的背景颜色。 | TF |
| border | pixels | 规定表格边框的宽度 | STF |
| cellpadding |
*pixels *% |
规定单元边沿与其内容之间的空白 | STF |
| cellspacing |
*pixels *% |
规定单元格之间的空白 | STF |
| summary | text | 规定表格的摘要 | STF |
| width | *% *pixels |
规定表格的宽度 | STF |
表格的结构化
tr可以直接放在table中但是为了更好的管理这些tr，我们可以把不同的tr放到不同的分组中 thead（表格头部），tbody（表格身体），tfoot（表格尾部）；
caption（表格的标题）
1.2表格合并
跨行与跨列的属性在td标签中进行：
- colspan : 跨列合并（横向），一个单元格占一行内多个单元格的位置 跨n列，就把下面的n-1个td删除
- rowspan : 跨行合并（纵向），一个单元格占一列内多个单元格的位置 跨n行，在把它下面n-1 个 tr的td删除
示例:
<!-- 第一个格子跨两列 --> <table border="1" width="800" cellspacing="0" > <tr> <td colspan="2">1.1</td> <td>1.3</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> </table> <!-- 第一个格子跨两行 --> <table border="1" width="800" cellspacing="0" > <tr> <td rowspan="2">1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td>2.2</td> <td>2.3</td> </tr> </table>
注意事项：列的个数要一致 如果一个格子中没有内容，请尽量使用 （ 空格）补齐
1.3 常见问题
- 1.如果要完成跨行跨列，先做一个完整的表格。再一步一步的去完成跨行合并或跨列合并操作。
- 2.结构化后的表格需要去掉结构标签后,再做合并操作
- 3.注意需要合并的td起始位置,合并完成后必须清除同行或列多出来的td
二、表单标签 Form（重点）
表单的认识
定义：表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：
- 1） 表单标签：这里面包含了处理表单数据请求URL地址以及数据提交到服务器的方式。
- 2） 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
- 3） 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的处理程序或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
Form 标签
基本结构:<form></form>
功能说明：用于声明表单区域，定义采集数据的范围，也就是<form>和</form>里面包含的数据将被提交到服务器。
基本语法：<form action="URL" method="get|post">...</form>
- get:将数据显示在网址的后面
- post：将数据隐藏，不出现在网址中
属性说明：
| 属性 | 值 | 说明 |
| accept-charset | charset_list | 规定服务器可处理的表单数据字符集 |
|
action |
URL | 规定当提交表单时向何处发送表单数据 |
| autocomplete | on off |
规定是否启用表单的自动完成功能 |
| enctype | 可能的值： application/x-www-form-urlencoded(默认) multipart/form-data text/plain |
规定在发送表单数据之前如何对其进行编码。 上传文件时必须指定为：multipart/form-data |
| method | get(默认) post |
规定用于发送 form-data 的 HTTP 方法 |
| name | form_name | 规定表单的名称 |
| novalidate | novalidate | 如果使用该属性，则提交表单时不进行验证 |
| target | _blank _self(默认) _parent _top framename |
规定在何处打开 action URL |
示例：
<form action="post.php" method="get"> <p>姓名：<input type="text" name="username" /></p> <p>密码：<input type="password" name="userpass" /></p> <input type="submit" value="提交" /> </form>
表单元素（掌握）
3.1 输入框 input
定义与用法：<input /> 标签用于搜集用户信息
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。<input />是一个行内元素，也是一个单标签，需要自关闭。
input的属性：
- name：自定义输入框的名字
- size：输入框长度
- readonly：只读，单属性
- maxlength：设置输入最大内容的长度
- disabled：禁用
- type：自定义输入框的类型
- value：定义输入框的默认值
- checked：设置单选或复选的默认值
type属性的类型：
| 类型 | 名称 | 特点 |
| text | 普通文本框 | 默认 |
| password | 密码框 | 内容显示为*号 |
| submit | 提交按钮 | 点击后就提交表单 |
| button | 普通按钮 | --- |
| reset | 重置按钮 | 回到最初状态（注意：不是清空） |
| radio | 单选 | 一组单选必需name相同 |
| checkbox | 多选 | 一组多选必需name相同 |
| file | 文件上传框 | 可以选择文件进行提交 |
| hidden | 隐藏域 | 隐藏控件，但是会被提交 |
3.2 HTML5中的新属性
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
- Color 颜色选择器
- Date 日期选择框
- Datetime 日期时间选择框
- datetime-local 日期和时间 (无时区)选择框
- month 月份选择器
- time 时间选择框
- week 周和年选择框
- email 电子邮件
- number 数值的输入域
- range 区间选择器
- search 搜索框
- tel 电话号码
- url url地址
name属性：
注：表示控件的名称，有名称的标签数据才会提交到后台
凡是要提交到后台的控件，都要加上name
用于单选与多选的分组，同一组的元素name需要一致
名字的命名，可以使用：英文、数字、下划线 ，数字不能开头；建议使用输入框所表达的含义相应的英文或拼音
value属性：
注：有不同的类型(type)中，value的意义是不同的
text/password 如果我们提交写上,它就是默认值(也是我们要提交的值)，提交value的值
submit/button/reset 表示显示在按钮中的文字
radio/checkbox 是一个元素所代表的值
其它属性：
placeholder：定义输入框的提示文字
maxlength：设置文本框最多输入多少字符
readonly：只读(不可输入)
disabled：禁用(不可输入) -> 不会提交这个表单元素的数据
checked：仅用于 radio/checkbox，作用是设置默认选中项
代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <form action="login.html" method="post"> <p>账号：<input type="text" name="username"/></p> <p>密码：<input type="password" name="passwd"/></p> <p>性别： <input type="radio" name="gender" value="男" checked/>男 <input type="radio" name="gender" value="女"/>女 <input type="radio" name="gender" value="保密"/>保密 </p> <p>爱好： <input type="checkbox" name="hobbuy" value="唱歌" checked/>唱歌 <input type="checkbox" name="hobbuy" value="看书"/>看书 <input type="checkbox" name="hobbuy" value="学习"/>学习 <input type="checkbox" name="hobbuy" value="上网"/>上网 </p> <p><input type="file" name="image"/></p> <p>推荐人：<input type="hidden" name="commend"/></p> <p> 日期：<input type="date" /> 日期：<input type="datetime-local" /> </p> <p>月份：<input type="month" /></p> <p>几周：<input type="week" /></p> <p>时间：<input type="time" /></p> <p>邮箱：<input type="email" /></p> <p>数字：<input type="number" max="100" min="1" step="any"/></p> <p>区间：<input type="range" max="100" min="1" step="1" oninput="out.innerHTML=this.value"/> <output id="out"></output> </p> <p> <button type="submit">提交</button> <button type="reset">重置</button> </p> </form> </body> </html>
3.3 下拉框 select
基本结构：
<select name=””> <option></option> </select>
代码示例：
<form action="login.php" method="post"> <p>特长： <select name="skill"> <option value="请选择">...请选择...</option> <option value="足球">足球</option> <option value="蓝球">蓝球</option> <option value="游戏">游戏</option> </select> </P> </form>
select 的属性：
| 属性 | 值 | 描述 |
| autofocus | autofocus | 规定在页面加载后文本区域自动获得焦点 |
| disabled | disabled | 规定禁用该下拉列表 |
| multiple | multiple | 规定可选择多个选项 |
| name | name | 规定下拉列表的名称 |
| size | number | 规定下拉列表中可见选项的数目 |
3.4 option标签
定义和用法：option 元素定义下拉列表中的一个选项（一个条目）。
浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。option 元素位于 select 元素内部。
option的属性：
| 属性 | 值 | 描述 |
| disabled | disabled | 规定此选项应在首次加载时被禁用 |
| selected | selected | 规定选项（在首次显示在列表中时）表现为选中状态 |
| value | text | 定义送往服务器的选项值 |
注意：
- 当option中有value的时候，传将value传到后台
- 没有value的时候，将它显示的内容传到后台
3.5 多行文本域 textarea
定义和用法：<textarea> 标签定义多行的文本输入控件
- 文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
- 可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
- 提示:可以通过 <textarea> 标签的 wrap(html5)属性设置文本输入区内的换行模式。
代码示例：
<!-- 文本域--> <p>自我评价： <textarea name="aboutme" cols="50" rows="5"></textarea> </p>
3.6 Label标签
定义和用法：<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
注：
通常用于单选或复选框
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
Label的两种写法：
1）<label> <input type="radio" name="gender" id="male" />男 </label>
2）<input type="radio" name="gender" id="male" /><label for="male">男</label>
3.6 按钮 button
定义和用法：<button> 标签定义一个按钮。
示例：
<button type="button">提交</button>
重要事项：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 </button> 之间的文本，而其他浏览器将提交 value 属性的内容。建议在 HTML 表单中使用 input 元素来创建按钮。
三、CSS和HTML综合运用
登录框参考效果
注册界面效果:
登录界面源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京东</title> <style> a:link, a:visited { color: #333333; text-decoration: none; } a:hover { color: #ff0000; text-decoration: underline; } main, header { width: 990px; margin: 0 auto; } main { width: 990px; height: 475px; background: url("images/bg-ad.png"); position: relative; } footer { text-align: center; font-size: 12px; } footer a { padding: 0 8px } #login { background: #ffffff; width: 346px; height: 311px; position: absolute; left: 600px; top: 20px; } #login > h1 { font-size: 20px; text-align: center; border-bottom: solid #eeeeee; line-height: 2.5em; color: red; } #login form { width: 300px; margin: 0 auto; } #login input { font-size: 18px; height: 30px; width: 300px; box-sizing: border-box; } .right { text-align: right; } #login button { width: 300px; height: 30px; color: #eeeeee; background-color: red; border: 0; } </style> </head> <body> <header> <img src="./images/logo2.jpg" alt="LOGO"/> </header> <main> <section id="login"> <h1>账户登录</h1> <form action="login.html" method="post"> <p><input type="text" name="username" placeholder="邮箱/用户名/账号"/></p> <p><input type="password" name="password" placeholder="密码"/></p> <p class="right"><a href="#">忘记密码？</a></p> <p> <button type="submit">登 录</button> </p> </form> </section> </main> <footer> <p> <a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">人才招聘</a> | <a href="#">商家入驻</a> | <a href="#">手机京东</a> | <a href="#">广告服务</a> | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a href="#">京东社区</a> | <a href="#">京东公益</a> | <a href="#">English Site</a> </p> <p>Copyright©2004-2020 京东JD.com 版权所有</p> </footer> </body> </html>
注册界面源代码：
文本阴影
text-shadow属性：文本添加阴影效果
语法：
<h1 style="text-shadow:1px 2px #eee">西华大学</h1>
取值：
- 第一个长度值用来设置对象阴影的水平偏移值，可以为负数
- 第二个长度值用来设置对象阴影的垂直偏移值，可以为负数
- 第三个长度值用来设置对象阴影的模糊程度，不可以为负数(可不写)
- 第四个值用来设置阴影的背景颜色
文本换行
语法：word-weap: break-word;
允许单词内部换行，对中文无效。
五、面试题
1.POST和GET提交方式的区别是什么？
