首页 前端知识 入门HTML5:简单的个人注册信息页面实现

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

2024-08-04 00:08:12 前端知识 前端哥 244 210 我要收藏

效果图

代码实现:

<!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属性值不同,则功能不同

     <input type="....">

     type属性值    说明

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

     password   密码框

     radio      单选框

     checkbox   多选框

     file       上传文件

        占位文本:提示信息

        <input type="...." blaceholder="提示信息">

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

         单选框:radio

         常用的属性:

         属性名     作用        特殊说明

         name       控件名称    控件分组,同组只能选一个(单选功能)

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

     

         多文件上传-file

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

         <input type="file" multiple>

        多选框-checkbox

        多选框也叫复选框

        默认选中:checked

        <input type="checkbox" checked>

    下拉菜单:

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

    文本域:

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

    标签:textarea双标签

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

label标签

作用:网页中,某个标签的说明文本。

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

label标签-增大点击范围

写法一、

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

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

<input type="radio" id="man">

<label for="man">男</label>

方法二、

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

<label><input type="radio">女</label>

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

    按钮-button

    <button type="">按钮</button>

    type属性    说明

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

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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14743.html
标签
评论
发布的文章

RapidJSON介绍

2024-08-14 00:08:38

jQuery 4 beta 震撼发布

2024-08-14 00:08:36

cJSON的使用

2024-08-14 00:08:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!