HTML列表框文本域和文件域

思诚代码块

已于 2022-01-24 14:05:41 修改

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML 实战讲解文章标签： html 前端

于 2022-01-24 13:25:36 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47556601/article/details/122657904

HTML 实战讲解专栏收录该内容

14 篇文章

订阅专栏

本文介绍了HTML中的列表框、文本域和文件域的使用，通过实例展示了如何设置默认选中值，并提供了相应的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家好，今天我们来分享一下HTML列表框文本域和文件域

上源码：

<p>下拉框:
        <select name="列表名称" >
            <option value="选项的值">中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值">英国</option>
            <option value="选项的值">印度</option>


        </select>

    </p>

看效果：

在这里插入图片描述

默认选中下拉框的值

<p>下拉框:
        <select name="列表名称" >
            <option value="选项的值">中国</option>
            <option value="选项的值"selected>美国</option>
            <option value="选项的值">英国</option>
            <option value="选项的值">印度</option>


        </select>

    </p>

看效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>

<!--表单form-->
<!--action: 表单提交的位置，可以是网站，也可以是一个请求处理的地方-->
<!--method : post,get提交方式-->
<!--get   提交的方式比较高效，但是不安全-->
<form action="我的第一个网页.html" method="post">
    <p>名字: <input type="text" name="username"value="你是最好的"maxlength="8" size="30"></p>
    <p>密码: <input type="password"name="pwd"></p>
<!--单选框-->
    <p>性别:
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女

    </p>

<p>
<!--    多选框:-->

    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code"  name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby"> 聊天
        <input type="checkbox"value="game" name="hobby"> 游戏
    </p>
    <!--按钮  input type="button"    //普通按钮
             input type="image"      //图像按钮
             inp
             ut type="submit"      //提交按钮
            input type="reset"       //重置按钮
              -->
    <p>按钮：
        <input type="button"name="btn1"value="点击变长">
        <input type="image"src="../resourse/images/QQ截图20211026123053.png ">

    </p>
    <p>国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth"selected>瑞士 </option>
            <option value="yingdu">印度</option>
        </select>

    </p>
    <!-- cols="50 " rows="10   -->
    <p>反馈：
        <textarea name="textarea" cols="50 " rows="10">文本内容</textarea>
    </p>
    <!--文件域
    input type="file" name="files"
       -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
        </select>

    </p>
</p>
        <input type="submit">
        <input type="reset">

    </p>
</form>

</body>
</html>