学习博客：【HTML】表单

最新推荐文章于 2024-05-31 16:22:19 发布

「已注销」

最新推荐文章于 2024-05-31 16:22:19 发布

阅读量263

点赞数

分类专栏：前端 # HTML 文章标签：学习 html5

本文链接：https://blog.csdn.net/Aurinko324/article/details/123830613

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML

6 篇文章 0 订阅

订阅专栏

表单

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

<h1>注册</h1>

<!--表单form
action 可以是网站 也可以是请求处理地址
method get会暴露url中的信息不安全但高效    post不会暴露 可以传输大文件
-->
<form action="1.我的第一个网页.html" method="get">

<!--文本输入框
maxlength="8"   输入限制
size="20"   文本框长度
-->
<p>名字：<input type="text" name="username" value="admin"></p>

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

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


<!--多选框
checked 默认
-->
<p>爱好：
    <input type="checkbox" value="sleep" name="hobby" checked>睡觉
    <input type="checkbox" value="play" name="hobby">玩
    <input type="checkbox" value="run" name="hobby">跑步
    <input type="checkbox" value="code" name="hobby">写代码
</p>
    
<!--按钮-->
<p>按钮：
    <input type="button" name="btn1" value="点击领取"><br/>
    <input type="image" src="../resources/image/tx.jpg" height="100px" width="100px">
</p>
    
<p>
    <input type="submit">
    <input type="reset">
</p>
    
<p>下拉框：
    <select name="服务器列表">
        <option value="中国">中国</option>
        <option value="美国">美国</option>
        <option value="香港">香港</option>
    </select>
</p>

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

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

<!--邮件验证-->
<p>邮件:
    <input type="email" name="email" placeholder="请输入邮箱地址" required>
</p>

<!--URL验证-->
<p>URL:
    <input type="url" name="url">
</p>

<!--数字验证-->
<p>数字:
    <input type="number" name="number" max="10" min="0" step="1">
</p>

<!--滑块-->
<p>音量:
    <input type="range" name="voice" min="0" max="100" step="10">
</p>

<!--搜索框-->
<p>搜索框:
    <input type="search" name="search">
></p>

<p>
<!--增强鼠标可用性-->
    <label for="mark">点我点我</label>
    <input type="text" id="mark">
</p>

<!--自定义邮箱-->
<p>自定义邮箱:
    <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>


<p>
    <input type="submit">
    <input type="reset" value="清空">
</p>

</form>

</body>
</html>

在这里插入图片描述

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习博客：【HTML】表单

表单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录注册</title></head><body><h1>注册</h1><!--表单formaction 可以是网站也可以是请求处理地址method get会暴露url中的信息不安全但高效 post不
复制链接

扫一扫