HTML表单实战

最新推荐文章于 2023-07-07 19:48:46 发布

筱寒小记

最新推荐文章于 2023-07-07 19:48:46 发布

阅读量159

点赞数

分类专栏： # HTML+CSS+JS 文章标签： HTML 表单

本文链接：https://blog.csdn.net/qq_45165703/article/details/117364808

版权

HTML+CSS+JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get提交方式
    get：可以在URL中看到提交的信息，不安全，但高效
    post：比较安全，可以传输大文件
-->

<!--通用属性：
hidden       隐藏域
readonly     只读
disabled     禁用
placeholder  提示信息
required     非空判断
pattern      正则表达式
-->

<form action="MyFirstWeb.html" method="post">
    <!--文本输入框：input type="text"
    value="xx"       默认初始值
    maxlength="10"   最大字符数
    size="10"        文本框的长度
    -->
    <p>
        用户名：<input type="text" name="username">
    </p>

    <!--密码框：input type="password"-->
    <p>
        密码：<input type="password" name="pwd">
    </p>

    <!--单选框标签 input type="radio"
    value：单选框的值
    name：表示组
    -->
    <p>
        性别：
        <input type="radio" name="sex" value="boy"/>男
        <input type="radio" name="sex" value="girl"/>女
    </p>


    <!-- 多选框标签 input type="checkbox" -->
    <p>
        爱好：
        <input type="checkbox" name="hobby" value="sing"/>唱
        <input type="checkbox" name="hobby" value="jump"/>跳
        <input type="checkbox" name="hobby" value="bkb"/>篮球
    </p>

    <!--按钮
    input type="button"  普通按钮
    input type="image"   图像按钮
    input type="submit"  提交按钮
    input type="reset"   重置
    -->
    <p>
        按钮：
        <input type="button" name="btn1" value="点我">
        <input type="image" src="../resource/image/蓝步兵.jpeg">
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>

    <!--下拉框，列表框-->
    <p>
        国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth">瑞士</option>
        </select>
    </p>

    <!--文本域
        cols="50" rows="10"
    -->
    <p>
        反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>

    <!--文件域
    input type="file"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

    <!--邮箱验证-->
    <p>
        <input type="email" name="email">
    </p>
    <!--URL验证-->
    <p>
        <input type="url" name="url">
    </p>
    <!--数字验证-->
    <p>
        商品数量：
        <input type="number" name="number" max="100" min="10" step="1">
    </p>
    <!--滑块-->
    <p>
        <input type="range" name="voice" min="0" max="100" 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</title></head><body><!--表单formaction：表单提交的位置，可以是网站，也可以是一个请求处理地址method：post，get提交方式 get：可以在URL中看到提交的信息，不安全，但高效.
复制链接

扫一扫