html表格和表单

表格

用来表示一些格式化的数据

​ 课程表、人名单、成绩单……

<table>
    <tr>			<!--一个tr为一行-->
       <td></td> 	<!--一个td为一个单元格-->
        <td colspan="2"></td><!--横向合并单元格-->
        <td rowspan="2"></td><!--纵向合并单元格-->
    </tr>
</table>

常用属性

• thead、tbody、tfoot

  • 不管在源码中怎么写，在网页中的显示的顺序都会是

    thead
    tbody
    tfoot

  • 若表格中没有使用tbody，那么浏览器会自动创建一个tbody并将所有tr放于tbody中；所以tr不是table的子元素

• th 可表示头部的单元格（加粗、居中）

<table>
    <thead>			<!--头部-->
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>			<!--主体-->
        <tr></tr>
        <tr></tr>
    </tbody>
    <tfoot>			<!--底部-->
        <tr></tr>
    </tfoot>
</table>

表格的样式

大小

width:100%;
height:50px;

对齐

td{					/*默认情况下，td是垂直居中的*/
    vertical-align:middle;	/*垂直方向文字*/
    text-align: center;		/*水平方向文字*/
}

边框之间的距离

border-spacing:0px;			/*边框之间的距离*/
border-collapse:collapse;	/*边框的合并*/

用伪元素美化表格

tr:nth-child(odd){/*单数行变色*/
    background-color:#bfa;
}
tr:hover{/*鼠标悬停时表格变色*/
    background-color:#f5f5f5;
}

表单

<form>元素

将本地的数据交给远程的服务器

• action：处理程序的一个URL或一个电子邮件地址

• name：提交给服务器的数据名

• target：用于指定显示服务器返回结果显示的目标窗口

  • blank
  • self

• method：用于指定浏览器向服务器传输表单时采用的数据传输方式

  • get：效率高、不保密
  • post：数据量大、保密

• autocomlete：规定是否启用表单自动完成功能

• novalidate：提交表单时不进行验证

• 重置和提交

  <form>
      <input type="submit" name=submit value="提交">
      <input type="reset" name="reset" value="重置">
  </form>
  

例

<form action="a.php"><!--action是要提交的服务器地址,默认值为当前页面-->
    <input type="text" name="text" vlue="文本" autocomplete="off" autofocus>
    	<!--文本输入-->
        <!--autocomplete用于开启/关闭自动补全-->
    	<!--autofocus自动获取光标焦点-->
    
    <input type="radio" name="radio" vlue="是">
    <input type="radio" name="radio1" value="否" checked>
    	<!--单选按钮-->
    	<!--cahecked可以将单选按钮设置为默认选中-->

    <input type="checkbox" name="b" value="0">
    <input type="checkbox" name="b" value="1">
    <input type="checkbox" name="b" value="2" checked>
    	<!--复选按钮-->
    
	<select name="c">
        <option value="0"></option>
        <option value="1"></option>
        <option value="2"></option>
        </select>
	<!--下拉列表-->
    
	<input type="submit" value="Submit">
    	<!--提交按钮-->
    
    <input type="password" name="密码">
    	<!--密码框-->
</form>

多行文本

<textarea  rows="高度" cols="宽度">这个家伙很懒，什么都没有留下</textarea>

按钮

<button> 控件 与 <input type=“button”> 相比，提供了更为强大的功能和更丰富的内容

<form action="">
	<input type="button" value="按钮">
    	<!--点击后无效果-->
    <input type="reset">
    	<!--刷新页面-->
        
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">按钮</button>
</form>

其他

<form>
    <input type="color" name="color">
    	<!--供用户设置颜色-->
    <input type="email" name="eamil">
    	<!--供用户设置eamil-->
    <input type="tel">
    	<!--供用户设置电话-->
	<input type="file">
    	<!--供用户上传文件-->
    	
</form>

只读、禁用

<form>
    <input type="text" name="username" readonly>
    	<!--readonly设置只读，数据能提交-->
    <input tyre="test" name="username" disabled>
    	<!--disabled设置禁用，数据不能提交-->
</form>