form表单

Posted 2020-12-30 rose1jj

1. 设置图片在竖直方向上居中显示，只对图片起作用；vertical-align:middle;
2. form表单主要用来实现客户端将用户端输入的数据提交给后台服务器

<form action=”” method=”” enctype=””>

Action：对应的服务器的地址

Method：客户端和服务器的连接方式，主要的连接方式有get和post两种。默认是get连接

Enctype：设置form表单提交数据的编码规则，默认是application/x-www-form-urlencoded.按照标准的UTF8编码格式进行数据的编码，如果form表单传输的数据中含有文件类型的数据，此时enctype的值，必须为multipart/form-data

1. <input type=”text” name=”username” value=”” placeholder=””>

type:设置input标签的类型

text：代表的是单行文本输入框

name:设置未来向服务器提交的数据的key

value:设置未来向服务器具体提交的数据value，但是注意如果当前的form表单控件中额数据无法唯一确定，此时value属性可以不添加值

placeholder：设置当form表单控件没有其他数据时所对应的数据提示

1. <input type=”radio” name=”sex” value=”” checked>男

Radio：代表单选框，注意单选框name属性值必须相同，否则单选框就会被看成是复选框，其次因为每一个单选框对应的值都是唯一的，因此对于单选框value需要人为规定值，加上checked则默认选中

1. <input type=”checkbox” name=”hobby1” value=”打篮球” >打篮球

Checkbox：代表复选框

1. Type的属性值为：data:代表日期选择框

Week：代表星期控件

number:数字控件

1. label:将对应id属性的控件和其标记的内容进行绑定

用法：<label for=”绑定的标签对应的id属性”>

                             中间为一些内容

           </label>

                    <input type=”file” name=”file_up” multiple id=”与被label绑定的id属性值一样”>

这样就完成了绑定，即当点击label中间的内容时，会起到被绑定内容的作用

File：文件上传控件

         <input type=”hedden” name=”x” value=””>隐藏提交，该控件的内容不会再网页中显示，而是当用户点击的时候自动进行数据的提交，该控件可以保护一些数据避免被用户篡改

1. 所在城市：<select name=”city” id=””>

<option value=”郑州”>郑州</option>

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

<option value=”南京”>南京</option>

<option value=”佳琪”>佳琪</option>

</select>此为下拉菜单

1. 多行输入框<textarea name=”sd” cols=”30” rows=”10”></textarea>

cols:多行文本输入框，文本框能显示的列数

rows：代表多行文本输入框最多能够显示的行数，如果大于该行数，多出的内容用户只能通过滚动查看

1. <input type=”submit” value=”注册”>

提交按钮：当用户点击的时候，form表单自动将用户输入的数据直接提交给服务器，因此该按钮通常用来完成数据的提交操作

<input type=”reset” value=”重置”>

重置按钮：当用户点击按钮的时候，该按钮会自动将所有form表单控件恢复成最初状态

<input type=”button” value=”普通按钮”>

普通按钮：当用户点击按钮时，该按钮并不会控制表单进行任何操作，注意在网页中按钮对应的盒模型结构默认的是怪异盒模型，width/height包含三部分（border+padding+content）

四table表格

1. border-collapse:设置表格边框合并
2. table-layout:fixed;设置表格单元格均分表格的宽度
3. tr:设置表格的行       td:设置表格的列   th: th和td一样都表示单元格，不同的是th显示的内容以加粗的字体显示，一般用来充当表格每一列的标题。因此th标签通常放置在表格的第一行

<table border=”1’ cellspacing=”0” cellpadding=”10px” frame=”all”  rules=”all” width=”1200”>

<tr>

           <td colspan=”2”>1</td>

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

           <td>1</td>

           <td>1</td>

           <td>1</td>

</tr>

</table>

border:设置表格的边框

cellspacing:设置单元格的距离，如果为0，此时单元格之间会相交

cellpadding:设置单元格的内边距，但是内边距值上下左右都一样，如果需要设置不同的内边距，此时可以通过padding设置

frame：设置外部边框哪部分可见

rules :设置表格内部边框哪部分可见

colspan:列合并，设置对应的单元格和其右侧单元格进行合并

rowspan:行合并，设置单元格和其下边的单元格进行合并，注意，colspan与rowspan对应的是两个数值，该数值代表一次合并几个