下拉列表、隐藏域、表格

笔记7.10

目录

笔记7.10 1

1.表单 1

1.1文件选择框 1

1.2下拉列表 1

1.3 Textarea：文本区域 2

1.4 Fieldest：字段集 3

1.5隐藏域 3

1.6表单总结 3

2.table 4

2.1表格 4

总结 4

 

 

1.表单

1.1文件选择框

<input type="file" accept="application/pdf"/>

1.2下拉列表

i下拉列表的好处：

方便书写

规范化

空间小，优化界面

ii下拉列表的代码：

<select name="province" id=""> <!--省份（province）-->
<option value="33">浙江</option>
<option value="41">河南</option>
<option value="32">江苏</option>
<option value="36">江西</option>
</select>

提交的参数如下：result.html?province=33

iii、多选

多选代码：

<select name="color" multiple="" size="3">
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
<option value="yellow">黄色</option>
<option value="black">黑色</option>
</select>

 

1.多选可通过设置multiple属性来实现，ctrl+单击选择多个

传递参数与CheckBox一样，都可以在url地址显示

2.<select>标签的size属性定义了显示的长度，默认是4个

//代码格式化快捷键：Ctrl+Alt+L

3.可以使用optgroup来对选项进行类，label就是类名，disabled对某个选项进行不能选择操作，不让你选

4.可以默认选项<selected>;写在选项中

<select name="car">
<optgroup label="国产车">
<option value="红旗">红旗</option>
<option value="byd">比亚迪</option>
<option value="奇瑞">奇瑞</option>
</optgroup>

<optgroup label="德国车">
<option value="benz">奔驰</option>
<option value="bwm">宝马</option>
<option value="大众">大众</option>
</optgroup>
<optgroup label="日本车" disabled>
<option value="本田" selected>本田</option>
<option value="丰田">丰田</option>
<option value="三菱">三菱</option>
</optgroup>
</select>

 

 

1.3 Textarea：文本区域

有name，cols，rows，disabled，readonly属性

Name：这个文本区域的名字；

Cols：这个文本区域的长度，意思是一行所能显示的字符长度

Rows：这个文本区域的高度，意思就是文本所能显示的行数

Disabled：定义为禁选的，你不能对文本内容进行操作

Readonly：定义文本区域为只读模式

<textarea id="ch4" cols="60" rows="5">
<form action="#" method="post">
<label for="userId">账号:</label>
<input id="userId" type="text" maxlength="10" size="8" value="456"/>
<br>
<label for="userId">密码:</label>
<input id="password" type="password" maxlength="6" size="8"/>
<br>
<input type="radio" name="role"/>学生
<input type="radio" name="role" checked/>教师
<input type="radio" name="role"/>管理员
</form>
<input type="submit" value="提交"/>
</textarea>

 

总结：与input的text差不多，text一般只输入一些简单的信息，字数较小；textarea可以输入较多的信息，一般是简历之类的，需要换行的，这个换行的特点是最大的区别；

1.4 Fieldest：字段集

<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

当一组表单元素放到 <fieldset>标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者甚至可创建一个子表单来处理这些元素。
只有legend属性

Legend：字段集的名称

<form action="result.html" method="get">
<fieldset>
<fieldset>
姓名：<input type="text" name="name">
<br/>
年龄：<input type="text" name="age">
<br/>

性别：<input type="text" name="sex">
</fieldset>

<fieldset>
毕业学校：<input type="text" name="schoo">
<br/>
专业：<input type="text" name="major">
</fieldset>

<fieldset>
工作单位：<input type="text" name="name">
<br/>
职务：<input type="text" name="work">
</fieldset>
</fieldset>

 

 

1.5隐藏域

当需要想服务器传送参数的时候，而有些参数你又不需要更改，就是默认的，你也不需要看的时候，你可以使用隐藏域（hidden），这就方便多了，一般是在修改密码的时候用的

<input type="hidden" name="StuNO" value="20140202502" />
<form action="result.html" method="post">
<input type="hidden" name="StuNO" value="20140202502" />
原密码：<input type="password" name="old">
<br/>
新密码：<input type="password" name="new">
<br/>
<input type="submit" value="修改密码"/>
</form>

 

1.6表单总结

200：请求成功

404：请求的东西不存在

General：

 

Response headers：

 

Request headers：

 

Form data：

 

 

 

 

 

2.table

2.1表格

表格组成部分：标题，表头，主题，表尾

Table：定义表格

Caption：定义表格的标题

Thead：定义表头部分

Tbody：定义表格主题部分

Tfoot：定义表尾，一般显示汇总数据

Tr：定义一行

Th：定义一个数据项，加粗样式

Td：定义一个数据项

Td，th的rowspan，colspan分别定义单元格的跨行的行数，跨列的列数。

总结

今天学了好多，接触了好多新的东西。

1. 学了文件的提交，上传，也是使用input，type是file格式，你也可以规定上传的格式，比如jpg格式，png格式，也可以只上传doc文档，使用accept="application/pdf"

2. 下拉列表（select），里面有选项（option），感觉与单选按钮（radio）差不多，只不过是节省了空间，你可以默认某个选项，这个与单选按钮很类似，只不过用的东西不同，单选按钮用的是checked，下拉列表使用selected。

3. 下拉列表也可以多选，多选只需要在单选的基础上添加multiple=""属性，也可以默认设定，使用的也是selected。单选的选择键是ctrl+鼠标单击左键；你可以使用optgroup来进行内部分类，也可以使用disable来禁止选择。

4. Textarea 文本区域，有name，cols，rows，disabled，readonly；

i. Name：这个文本区域的名字；

ii. Cols：这个文本区域的长度，意思是一行所能显示的字符长度

iii. Rows：这个文本区域的高度，意思就是文本所能显示的行数

iv. Disabled：定义为禁选的，你不能对文本内容进行操作

v. Readonly：定义文本区域为只读模式

5. fieldset是把相同的东西集合在一起，有利于查看，有序。给我感觉是没多大用处，就是分类。不过我觉得可以嵌套，那就比较厉害了

6. 隐藏域，就是一些你不需要更改或者你不需要看的东西不显示，但是数据传送的时候也会传输。这样方便了自己，也安全点

7. Table属性包括Caption， Thead，Tbody，Tfoot，Tr，Th，Td，

Caption是表格题目，thead是表格的头部，一般会使用th加粗；tbody是表格的主体，与td一起使用；tfoot是表格尾部，一般是总计之类的，也是使用td

8. Td，th的rowspan，colspan分别定义单元格的跨行的行数，跨列的列数。