HTML5实现注册表单

简介: HTML5实现注册表单

注册表单代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>注册账号</title>
    </head>
    <body>
        <form action="getSend.php" method="GET">
            <fieldset>
                <legend>注册界面</legend>
                <div>
                    <label>
                        <span>账号: </span>
                        <input type="text" name="account" placeholder="请输入账号" required />
                    </label>
                </div>
                <div>
                    <label>
                        <span>密码: </span>
                        <input type="password" name="password" placeholder="请输入密码" required />
                    </label>
                </div>
                <div>
                    <span>性别: </span>
                    <label>
                        <input type="radio" name="sex" value="男" checked>男
                    </label>
                    <label>
                        <input type="radio" name="sex" value="女">女
                    </label>
                    <label>
                        <input type="radio" name="sex" value="保密">保密
                    </label>
                </div>
                <div>
                    <span>爱好: </span>
                    <label>
                        <input type="checkbox" name="hobby" value="篮球">篮球
                    </label>
                    <label>
                        <input type="checkbox" name="hobby" value="足球">足球
                    </label>
                    <label>
                        <input type="checkbox" name="hobby" value="跑步" checked>跑步
                    </label>
                    <label>
                        <input type="checkbox" name="hobby" value="音乐" checked>音乐
                    </label>
                    <label>
                        <input type="checkbox" name="hobby" value="电影">电影
                    </label>
                </div>
                <div>
                    <label>
                        <span>简介: </span>
                        <textarea name="content" cols="40" rows="10" placeholder="立志做一名优秀的程序猿..."></textarea>
                    </label>
                </div>
                <div>
                    <label>
                        <span>生日: </span>
                        <input type="date" name="time" required>
                    </label>
                </div>
                <div>
                    <label>
                        <span>电话: </span>
                        <input type="number" name="tel" placeholder="请输入手机号" required>
                    </label>
                </div>
                <div>
                    <button type="submit">马上注册</button>
                    <button type="reset">清空所有信息</button>
                </div>
            </fieldset>
        </form>
    </body>
</html>

注册表单效果

原创作者:吴小糖

创作时间:2022-8-23

相关文章
|
1天前
|
存储 移动开发 JavaScript
HTML5中form表单防止重复提交的两种方法
HTML5中form表单防止重复提交的两种方法
|
1天前
使用HTML编写注册页面
使用HTML编写注册页面
13 1
|
1天前
|
数据安全/隐私保护
HTML 表单和输入
HTML 表单和输入。
15 3
|
1天前
|
移动开发 前端开发 数据安全/隐私保护
8.使用html制作表单
8.使用html制作表单
12 0
|
1天前
|
移动开发 前端开发 数据安全/隐私保护
【基于HTML5的网页设计及应用】——用户注册
【基于HTML5的网页设计及应用】——用户注册
33 0
|
1天前
HTML_表单标签
HTML_表单标签
16 0
|
1天前
|
Java 测试技术 数据库
基于SpringBoot+HTML实现登录注册功能模块
基于SpringBoot+HTML实现登录注册功能模块
|
1天前
|
存储 移动开发 安全
【专栏:HTML基础篇】HTML表单基础:创建用户交互界面
【4月更文挑战第30天】本文介绍了HTML表单的基础知识,包括表单的基本概念、输入元素(如文本框、密码框、单选/复选框、提交/重置按钮等)、表单属性(如action、method、target)以及表单验证。了解这些内容能帮助开发者创建功能齐全、交互性强的用户界面,提升网页开发技能。
|
1天前
|
移动开发 JavaScript HTML5
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
16 0
|
1天前
|
移动开发 前端开发 JavaScript
《HTML 简易速速上手小册》第8章:HTML 表单高级技术(2024 最新版)
《HTML 简易速速上手小册》第8章:HTML 表单高级技术(2024 最新版)
33 0