HTML之表格和表单

Posted 2020-06-23

1. 表格和表单的区别：表格多用于页面布局，创建页面的排版样式。表单多用于传输数据获取信息，如：input输入框，单选、多选、下拉选择框。

2. 表格：table。

　　a. 基本样式如下：

　　<table>

　　　　<caption> table test </caption>

　　　　<tr>

　　　　　　<td rowspan="2">1</td>

　　　　　　<td>2</td>

　　　　</tr>

　　<table/>

　　b. 单独操作某列，其中每一个col代表一列的样式，span默认值为1，设置其他值时，表示从该行开始的几列的样式。

　　<colgroup>

    <!--span默认1-->

    <col style="background: red;"/>
    <col style="background: orange;"/>
    <col style="background: yellow;" span=“2”/>
　　<col style="background: green;"/> 
</colgroup>

　　c.  基本属性

　　colspan：合并列数，值为数值，rowspan：合并行数，值为数值。

3. 表单：form

　　a. 输入框，格式如下：<input type="text" value="textInput" size="20" maxlength="12" placeholder="请输入用户名" />

　　其中type属性可以为：text（文本），password（密码），button（按钮），checkbox（多选），radio（单选），reset（复位），submit（提交），file（上传文件），number（数字），email（邮箱），url（连接），tel（电话），color（颜色），date（日期），datetime（时间），datetime-local（本地时间），等等...，其中，当属性为radio时，必须将一组内的单选选项的 name设置为一致，例如：男<input type="radio" name="sex"/>  女<input type="radio" name="sex"/>。

　　input标签可以使用type="hidden"属性来定义隐藏的输入字段，隐藏字段对于用户而言不可见，一般用来传递参数。

　　value为该文本框的值，size为输入框的长度，maxlength为输入框能输入的最大内容。placeholder为输入框内的提示文字。

　　b. 设置文本框自动聚焦和自动完成填充。

　　　　<input  type="text" autofocus autocomplete="on" />

　　c. datalist标签

　　　　datalist定义一个可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表。如下：

　　　　<input type="text" list="iList" />

　　　　<datalist id="iList">

　　　　　　<option lable="男装" value="男装">男装</option>

　　　　　　<option lable="女装" value="女装">女装</option>

　　　　　　<option lable="童装" value="童装">童装</option>

　　　　</datalist>

　　d. 进度条

　　　　min-max表示进度条的范围，step表示每次滑动进度条增加的阶数，使用格式如下：

　　　　<input type="range" min="0" max="100" step="2" />

　　e. 下拉选择标签 select

　　　　<select name="" id="" mutiple  size="1">

　　　　　　<option value="1" selected>四川</option>

　　　　　　<option value="2">北京</option>

　　　　　　<option value="3">上海</option>

　　　　</select>

　　　　其中，mutiple表示可以多选，size为显示下拉框的长度，selected为浏览器加载时默认的选择选项。

　　f. 分组标签fieldset

　　　　fieldset标签能组合表单的相关元素，生成一组相关的表单字段，浏览器会以特殊的方式来显示他们。其子元素legend 元素定义fieldset的标题。

　　g. 文本框textarea

　　　　其使用方法如下：<textarea name="" id="" cols="10" rows="50" ></textarea>

　　　　分别使用cols和rows来控制文本框的大小。