html -表格-表单

xiaoxiao2021-03-01  78

表格

语法

<table>

<tr>

<td></td>

</tr>

</table>

创建行<tr></tr>

在行中创建单元格<td></td>

 

table属性

width

height

border 默认以像素为单位

bgcolor 颜色值表示 : 可以使用英文单词和十六进制

align 设置表格在窗口中的位置 left/center/right

cellspacing 设置单元格与边框之间的距离

cellpadding 设置单元格内容与单元格边框之间的距离

 

tr/td属性

width

height

bgcolor

align 单元格内容的水平对齐方式

valign 单元格垂直方向的对齐方式 top/middle/bottom

 

td独有属性

rowspan 设置单元格跨行合并取值为数字,表示跨几行

colspan 设置单元格跨列合并,取值为数字,表示跨几列

 

 

 

表格结构

<table>

<thead>

<tr>

<td></td>

</tr>

</thead>

<tbody>

<tr>

<td></td>

</tr>

</tbody>

<tfoot>

<tr>

<td></td>

</tr>

</tfoot>

</table>

thead tbody tfoot 可以省略,如果不写,表格中所有的内容会自动加入tbody中

thead tfoot 用来将一行或是若干行分组,作为表格的头部和尾部信息

表格标题

首行文本特殊样式

<table>

<caption>表格标题</caption>

<tr>

<th></th>

</tr>

</table>

<caption>可以用来设置表格标题,必须作为表格的第一个子元素使用

<th>用法与td 一样,自带文本居中和加粗效果

 

表单

作用

向服务器发送数据

基本语法

<form action=””  method=””>

</form>

 

action:属性指定表单数据提交到服务器中哪个文件,属性值为文件的路径

method 属性指定数据提交的方式 常用 get / post

 

注意: get 请求:

数据会被拼接在URL后面,直接发送,

安全性较低;数据大小受限,最大为2k。

是默认的的提交方式

port 请求:

数据会被打包,单独发送。

隐式提交给服务器,安全性高;数据大小不受限

表单控件

(重点)

文本输入框和密码框

  <input type=”text”  name=”uname” placeholder=”提示文本” >

  <input type="password" name="upwd">

 

     type: 属性用来指定控件类型

     name: 属性定义控件名称,缺少的话无提交

     placeholder: 设置用户输入之前的提示文本

单选和复选框

 <input type=”radio” name=”gender” value=”male” checked>

<input type=”checkbox” name=”hobby” value=”sing”>

 

注意:

  radio   表示单选按钮

  checkbox 表示复选框

  name属性用来定义控件并且分组,一组按钮的name 属性必须一致

     value 属性用来设置控件的值,最终会发送给服务器

     checked属性设置按钮默认选中状态

隐藏域

  隐式发送一些附加信息,用户不可见

<input type=”hidden”  name=”uid” value=”101”>

<input type=”hidden”  name=”other” value=”用户隐私”>

 

文件上传

<input type=”file”  name=”uimg”>

文本域

<textarea name=”uinfo” cols=”20” rows=”6”></textarea>

 

   cols 指定文本域默认显示的列数

一行能够显示的应为字符量(中文减半)

     rows 指定文本域默认显示的行数

     disabled 属性禁用表单控件,适用于所有的表单控件

下拉列表

 <section name=”area”>

       <option  value =”bj”>北京</option>

</section>

 

下拉菜单分组

<select name="address">

<optgroup label="山西省">

<option value="ty">太原市</option>

</optgroup>

<optgroup label="江苏省">

<option value="nj">南京市</option>

</optgroup>

</select>

 

 Value 属性值是最终发送给服务器是数据optgroup 用来对选项分组,通过label属性设置组名 option 用来设置具体的选项

 

提交 重置按钮 普通按钮 提交按钮 <input type="submit" > 将表单数据发送给服务器重置按钮<input type="reset" > 重置表单数据,恢复到初始状态普通按钮<input type="button" value=“点我” >

       普通按钮需要通过value属性设置显示文本

普通按钮<button type="submit">(可以手动)提交</button>

type可以取值submit reset button,可以实现 input 按钮的功能,需要添加标签文本显示在按钮上

label for ID

<label for="male">男</label>

<input type="radio" value="male" id="male" name="gender">

使用label标签显示文本将label的标签属性for 的属性值设置为将要绑定的表单控件的id值,实现点击文本跟点击控件一样的效果

 

补充:

maxlength 属性

用来设置输入框可输入的最大字符数

 

10. 取色板

<input type="color" name="colorpick">

 

转载请注明原文地址: https://www.6miu.com/read-4200205.html

最新回复(0)