HTML搜索框-滑块-简单验证

最新推荐文章于 2024-06-18 23:28:26 发布

约瑟芬儿

最新推荐文章于 2024-06-18 23:28:26 发布

阅读量226

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/qishi45/article/details/116919371

版权

html 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表框文本域和文件域</title>
</head>
<body>
<form action="1.我的第一个网页.html" method="get">
    <!--   文本输入框：input type=“text”
    默认值初始值为 咕咕咕咕咕
    输入限制为8
    文本框尺寸为30
    -->
    <p>名字：<input type="text" name="username" value="咕咕咕咕咕" maxlength="8" size="30"></p>
    <!--    密码框：input type="password"   -->
    <p>密码：<input type="password" name="pwd"></p>

    <!--
    单选框标签：
    input type="radio"
    value：单选框的值
    name：表示组  如果name相同，表示同一个组，name不同，组不相同
    组不相同的话可以同时勾选
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex">女

    </p>

    <!--
    多选框标签：
    input type="checkbox"
    -->
    <p>爱好：
        <input type="checkbox" value="smoking" name="hobby" checked>抽烟  <!--        默认选择        -->
        <input type="checkbox" value="drink" name="hobby">喝酒
        <input type="checkbox" value="Scald" name="hobby">烫头
    </p>

    <!--
    按钮：
    input type="button" 普通按钮
    input type="image" 图像按钮
    input type="submit" 提交按钮
    input type="reset" 重置按钮
    -->
    <p>按钮：
        <input type="button" name="btn1" value="点击变大">
<!--        <input type="image" src="../resources/image/1.jpg">-->
        
<!--
下拉框，列表框：
select标签
option  子选项
selected    默认选项
-->
    <p>国家：
    <select name="国家" >
        <option value="China">中国</option>
        <option value="usa">美国</option>
        <option value="Switzerland" selected>瑞士</option>   <!--        默认选择        -->
        <option value="Japan">日本</option>
        <option value="India">印度</option>
    </select>

    </p>

<!--
文本域：
<textarea> 标签定义多行的文本输入控件
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。
-->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>

<!--
input type="file" name="files"
文件域用来选择文件，还需要一个上传按钮
此处有两个name，上传文件是将文件提交给了文件域对应的files
并非按钮所对应的upload。
选择文件后value=所上传的文件，上传后files=所上传的文件
-->
    <p>文件上传：
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

<!--    邮件验证    -->
    <p>邮件：<input type="email" name="email"></p>
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>
<!--URL-->
    <p>URL:
        <input type="url" name="url">
    </p>
<!--数字-->
    <p>商品数量：<input type="number" name="num" max="100" min="0" step="1"></p>
    
<!--滑块：input type="range"-->
    <p>音量：
        <input type="range" name="voice" max="100" min="0" step="2">
    </p>

<!--搜索框-->
    <p>搜索：<input type="search" name="search"></p>
</form>
</body>
</html>

在这里插入图片描述

约瑟芬儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML搜索框-滑块-简单验证

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表框文本域和文件域</title></head><body><form action="1.我的第一个网页.html" method="get"> <!-- 文本输入框：input type=“text” 默认值初
复制链接

扫一扫

专栏目录