表单

最新推荐文章于 2024-07-15 15:35:16 发布

yu&2022

最新推荐文章于 2024-07-15 15:35:16 发布

阅读量53

点赞数

分类专栏： HTML5 文章标签：列表 html html5

本文链接：https://blog.csdn.net/weixin_45623678/article/details/113863577

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

表单

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post get
        post:比较安全，传输大文件
        get:我们可以在url中看到我们提交的信息，不安全，但高效
-->
<form action="1.我的第一个网页.html" method="get">
<!--1、文本输入框
input type="text"
name="" 唯一标识符
value="喻亚文" 默认初始值
maxlength="8" 最长能写几个字符
size="30" 文本框的长度
-->
<!--2、密码框
input type="password"
name="" 唯一标识符
-->
<!--3、单选框
input type="radio"
name="" 表示组 同一组只能选一个
value="" 单选框的值 唯一标识符
checked  默认选中
-->
<!--4、多选框
input type="checkbox"
name="" 表示组
value="" 多选框的值 唯一标识符
checked  默认选中
-->
<!--5、按钮
input type="button"  普通按钮
input type="image"   图像按钮
input type="submit"  提交按钮
input type="reset"   重置按钮
value="" 按钮上显示的文字
name=""  唯一标识符
-->
<!--6、下拉列表
select
name  名字
value 选中的值
selected 默认选中
-->
<!--7、文本域
textarea
-->
<!--8、文件域
input type="file"
name="" 标识符
-->
    <p>名字:<input type="text" name="username" placeholder="请输入用户名" required/></p>
    <p>密码:<input type="password" name="password" placeholder="请输入密码" required/></p>
    <p>
        <input type="radio" name="sex" value="boy" checked/>男
        <input type="radio" name="sex" value="girl"/>女
    </p>
    <p>
        <input type="checkbox" name="hobby" value="sleep"/>睡觉
        <input type="checkbox" name="hobby" value="book" checked/>看书
        <input type="checkbox" name="hobby" value="sport"/>运动
    </p>
    <p>
        <input type="button" name="btn1" value="普通按钮"/>
<!--        <input type="image" src="../resources/image/UI9.jff">-->
    </p>
        <select name="国家" id="guojia">
            <option value="ZG">中国</option>
            <option value="RS" selected>瑞士</option>
            <option value="MG">美国</option>
        </select>
    </p>
    <p>
        反馈：
        <textarea name="文本" id="text" cols="30" rows="10">文本内容</textarea>
    </p>
    <p>
        <input type="file" name="files"/>
    </p>
<!--9、简单验证-->
    <p>
        邮箱:
        <input type="email" name="email">
    </p>
    <p>
        URL:
        <input type="url" name="url">
    </p>
    <p>
        商品数量:
        <input type="number" name="num" max="10" min="0" step="1">
    </p>
<!--10、滑块-->
    <p>
        音量:
        <input type="range" name="voice" max="100" min="0" step="2">
    </p>
<!--11、搜素框-->
    <p>
        搜素:
        <input type="search" name="search">
    </p>
    <p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重置" />
    </p>
<!--表单的应用
隐藏域 hidden
只读 readonly
禁用 disabled
-->
<!--表单初级验证
placeholder="提示用语"  提示信息 用于输入框 文本域
required   非空判断 表示该输入框或文本域不能为空
pattern   正则表达式
-->
</form>
</body>
</html>

运行结果：

在这里插入图片描述

yu&2022

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单

表单源代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单学习</title></head><body><!--表单formaction:表单提交的位置，可以是网站，也可以是一个请求处理地址method:post get post:比较安全，传输大文件
复制链接

扫一扫