下拉列表、隐藏域、表格

笔记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文件选择框

1.2下拉列表

i下拉列表的好处：

方便书写

规范化

空间小，优化界面

ii下拉列表的代码：

 
    浙江
    河南
    江苏
    江西

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

iii、多选

多选代码：

    红色
    蓝色
    绿色
    黄色
    黑色

 

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

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

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

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

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

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

红旗 比亚迪 奇瑞 奔驰 宝马 大众 本田 丰田 三菱

 

 

1.3 Textarea：文本区域

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

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

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

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

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

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

    <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="提交"/>

 

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

1.4 Fieldest：字段集

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

当一组表单元素放到

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

只有legend属性

Legend：字段集的名称

    

        

            姓名：
            

            年龄：
            


            性别：
        

        

            毕业学校：
            

            专业：
        

        

            工作单位：
            

            职务：
        
    

 

 

1.5隐藏域

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

    
    原密码：
    

    新密码：
    

    

 

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分别定义单元格的跨行的行数，跨列的列数。