入门HTML5：简单的个人注册信息页面实现

不许说香菜的坏话

于 2024-04-14 17:57:58 发布

阅读量536

点赞数 8

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/2401_83050569/article/details/137750047

版权

效果图：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册信息</title>
</head>
<body>
    <h1>注册信息</h1>
    <form>
        <!--表单控件 -->
        <!-- 个人信息 -->
        <h2>个人信息</h2>
        <label>姓名：</label><input type="text" placeholder="请输入真是姓名">
        <br>
        <label>密码：</label><input type="password" placeholder="请输入密码">
        <br>
        <label>确认密码:</label><input type="password" placeholder="请重新输入密码">
        <br>
        <label>性别：</label>
       <label> <input type="radio" name="gender">男</label>
       <label> <input type="radio" name="gender" checked>女</label>
       <br>
       <label>居住城市：</label>
       <select>
        <option>贵州</option>
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
       </select>
        <!-- 教育经历 -->
        <h2>教育经历</h2>
        <label>最高学历:</label>
        <select>
            <option>博士</option>
            <option>硕士</option>
            <option>本科</option>
            <option>专科</option>
        </select>
        <br>
        <label>学校名称：</label><input type="text">
        <br>
        <label>所学专业：</label><input type="text">
        <br>
        <label>在校时间：</label>
        <select>
            <option>2015</option>
            <option>2016</option>
            <option>2017</option>
            <option>2018</option>
        </select>
        <select>
            <option>2019</option>
            <option>2020</option>
            <option>2021</option>
            <option>2022</option>
        </select>
        <!-- 工作经历 -->
        <h2>工作经历</h2>
        <label>公司名称：</label><input type="text">
        <br>
        <label>工作描述：</label>
        <textarea></textarea>
        <br>
        <!-- 协议和按钮 -->
        <input type="checkbox"><label>已同意以下协议：</label>
        <ul>
            <li><a href="#">《用户服务协议》</a></li>
            <li><a href="#">《隐私协议》</a></li>
        </ul>
        <br>
        <button>免费注册</button>
        <button type="reset">重新填写</button>
    </form>
</body>
</html>

代码实现主要围绕，表单的知识点，以下是关于表单的知识点学习，以便我们更容易写出一些简单的注册页面。

表单

作用：收集用户的信息

使用场景：登录页面、注册页面、搜索区域

input标签type属性值不同，则功能不同

type属性值说明

text 文本框、用于输入单行文本

password 密码框

radio 单选框

checkbox 多选框

file 上传文件

占位文本：提示信息

注：多适用于文本框和密码框

单选框：radio

常用的属性：

属性名作用特殊说明

name 控件名称控件分组，同组只能选一个（单选功能）

check 默认选中属性名和属性值相同，简写为一个单词

多文件上传-file

默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多功能。

多选框-checkbox

多选框也叫复选框

默认选中：checked

下拉菜单：

标签：select嵌套option,select是下拉菜单的整体，option是下拉菜单的每一页。

文本域：

作用：多行输入文本的表单控件

标签：textarea双标签

<textarea>默认提示文字</textarea>

label标签

作用：网页中，某个标签的说明文本。

经验：用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。

label标签-增大点击范围

写法一、

label标签只包裹内容，不包裹表单控件

设置label标签的for属性值和表单控件的id属性值相同

方法二、

使用label标签包裹文字和表单控件，不需要属性

提示：支持label标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等

按钮-button

type属性说明

submit 提交按钮点击后可以提交数据到后台（默认功能）

reset 重置按钮点击后将表单控件恢复默认值

button 普通按钮默认没有功能，一般配合javaScript

不许说香菜的坏话

关注

8
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
入门HTML5：简单的个人注册信息页面实现

<input type="radio">女</label><button type="">按钮</button>设置label标签的for属性值和表单控件的id属性值相同。<label for="man">男
复制链接

扫一扫