HTML表格表单制作

1.数据表格的作用及组成

作用：显示数据，展示数据

组成：

<table>用于定义表格的标签

    <tr>行

           <th>内容<th>表头单元格

           <td>内容</td>单元格

           <td>内容<td>单元格

             ....

    <tr>

</table>

1.<table></table>是用于定义表格的标签

2.<tr><tr>标签用于定义表格中的行，必须嵌套在<table></table>标签里面

3.<td></td>用于定义表格中的单元格，必须嵌套在<tr><tr>标签中

4.td代表表格数据（tabledata），即数据单元格的内容

5.<th>标签表示html表格的表头部分，一般位于第一行或第一列，表头单元格文本自动加粗

6.补充标签：<thead></thead>:用于定义表格的头部，<thead>标签内必须拥有<tr>标签，一般是位于第一行

<tbody></tbody>:用于定义表格的主体，主要用于放数据本体

7.以上标签都是放在<table></table>当中

2.表格的相关属性 

width="宽"     height="高"

border=“添加表格边框，表格边框大小”

cellspacing="单元格间距离"

cellpadding="单元格与内容之间的距离"

bgcolor="表格背景色“

align="表格对齐方式"（left/center/right）

合并单元格属性：

colspan="所要合并单元格列数”合并列，左右合并

rowspan="所要合并单元格行数”合并行，上下合并   

3.合并单元格三部曲 

1.先确定合并行还是合并列 

2.找到目标单元格，写上合并方式=合并的单元格数量，比如：<td colspan="2"></td>

3.删除多余的单元格

表单制作

1.表单的作用：用来收集用户信息。

 在html当中，一个完整的表单通常由，表单域、表单控件（也称为表单元素）、和提示信息3部分 组成

2.表单域：method提交方法  提交方式（post,get)

   <form action="#" name=“表单名称” method="post" >

   各种表单元素控件

   </form>

get和post的区别:

1. Get是不安全的，因为在传输过程，数据被放在请求的URL中；Post的所有操作对用户来说都是不可见的。 2. Get传送的数据量较小，这主要是因为受URL长度限制；Post传送的数据量较大，一般被默认为不受限制。 3. Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。 4. Get执行效率却比Post方法好。Get是form提交的默认方法。

3.文本框

  <input type ="text" value="默认值“  placeholder="输入框内容/ maxlength="限制输入数量 >

4.密码框

  <input type="password"/ “  placeholder="输入框内容  maxlength="限制输入数量>

5.提交按钮

  <input type="submit" value="按钮内容"/>

6.重置按钮

  <input type="reset" value="按钮内容"/>

7.禁用按钮 disable="disabled"(简写disabled)

8.默认选项 checked="checked"(简写checked)

9.下拉菜单

  <select>

<option>菜单内容</option>

<option>菜单内容</option>

<option  selected(默认选中)>菜单内容</option>

 <option  disabled(禁选)>菜单内容</option>

  </select>

selected默认  disabled禁选

10.多行文本框

     <textarea></textarea>  

11.占位   placeholder="内容"

12.按钮   <input type="button" value="按钮内容"/>

               button：只起到跳转作用，不进行提交，后期配合JS搭配使用。

               submit：是提交按钮 起到提交信息的作用

               file：文件域，使用场景，上传文件使用 <input type="file" value="按钮内容"/>

13.单选框

男<input type="radio" name="ral" value="男“/>

女<input type="radio" name="ral" value="女“ />

单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样。

14.复选框

<input type="checkbox" name="like" value="默认值“/>

<input type="checkbox" name="like" disabled="disabled">

(disabled="disabled" :禁用)

(checked="checked" :默认选中)

男<input type="radio" name="ral" value="默认值“ checked="checked" />

15.<lable>标签

     <lable>标签为input元素定义标注（标签）

      <lable>标签用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器就会自动将焦点（光标）          转到或者选择对应的表单元素上，用来增加用户体验

语法：<input type="radio" name="sex" id="sex"><lable for="sex" >男</lable>

核心：lable标签的for属性应当与相关元素的id属性相同