HTML之file控件、hidden控件、列表、div

遇安.YuAn

已于 2022-10-31 16:28:47 修改

阅读量1.9k

点赞数 2

分类专栏： HTML 文章标签： html 前端

于 2022-10-31 14:00:00 首次发布

本文链接：https://blog.csdn.net/qq_62731133/article/details/127595942

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

需要将文件上传时可以使用file控件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单</title>
</head>
<body>
<!--file控件，将来做文件上传使用的-->
 浏览 <input type="file"/>
</body>
</html>

当以后需要提交数据给服务器，但是又不希望用户看到，此时可以使用hidden控件，虽然不会显示出来但最后提交的时候会提交上去。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单</title>
</head>
<body>
<!--hidden控件，这是一个隐藏域控件-->
<form action="http://localhost:8080/oa/save" method="get">
    <!--需求：希望用户代码是隐藏的，但是提交表单的时候一定要提交-->
    <input type="hidden" name="usercode" value="111111"/>
<!--    用户代码：<input type="text" name="usercode"/><br>-->
    机构代码：<input type="text" name="orgcode"/><br>
    <input type="submit" value="保存"/>
</form>
</body>
</html>

<input>标签还可以设置readonly属性、disabled属性：

readonly只读的，不能修改，可以被用户看到，表单提交的时候会提交该数据

disabled只读的，不能修改，可以被用户看到，表单提交的时候不会提交该数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单</title>
</head>
<body>
<form action="http://localhost:8080/oa/save" method="get">
    <!--disabled readonly
    readonly只读的，不能修改，可以被用户看到，表单提交的时候会提交该数据
    disabled只读的，不能修改，可以被用户看到，表单提交的时候不会提交该数据
    -->
<!--    用户代码：<input type="text" name="usercode" value="1234" readonly/>-->
    用户代码：<input type="text" name="usercode" value="1234" disabled/>
    <input type="submit" value="保存"/>
</form>
</body>
</html>

扩展：设置文本框的最大输入长度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单</title>
</head>
<body>
<form action="http://localhost:8080/oa/save" method="get">
    <!--maxlength最大的输入长度-->
    <input type="text" maxlength="3"/>
</form>
</body>
</html>

        div是图层，也可以叫盒子。div是专门用来做网页布局的，其实最早的时候网页元素的布局是采用table进行布局，但是table布局不够灵活。

        当代的网页元素布局都是采用div的方式，div套用div。也就是盒子套盒子。div布局会更加的灵活、方便。div和span都可以看做是盒子，他们有什么区别：

        div默认情况下会独自占用一行，span不会独自占用一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div</title>
</head>
<body>
<div id="div1">
    我是一个div盒子
</div>
hello world
<span>
    我是一个span元素
</span>
hello world
</body>
</html>

列表：

无序列表创建方式：

<ul>

<li></li>

</ul>

        无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表创建方式：

<ol>

<li></li>

</ol>

        同样，有序列表也是一个项目的列表，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项内部同样可以使用段落、换行符、图片、链接以及其他列表等等。

        列表可以嵌套，也可以指定序号类型，只要在需要指定类型的标签内添加type属性。比如：原本序号为1、2、3改为A、B、C

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <!--无序列表-->
<ul>
    <!--可以嵌套 可以指定序号类型-->
    <li>中国
        <ul>
            <li>北京</li>
            <li>湖南</li>
        </ul>
    </li>
    <li>日本</li>
    <li>美国</li>
</ul>

<!--有序列表 可以嵌套 可以指定序号类型-->
<ol type="A">
    <li>水果</li>
    <li>蔬菜</li>
    <li>茶</li>
</ol>
</body>
</html>