下拉列表、隐藏域、表格

最新推荐文章于 2024-07-26 08:15:00 发布

best-toby

最新推荐文章于 2024-07-26 08:15:00 发布

阅读量1.6k

点赞数 1

分类专栏：新手笔记文章标签： js 菜鸟 html 笔记

本文链接：https://blog.csdn.net/besttoby01/article/details/74936719

版权

新手笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

笔记7.10

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>