实现登陆注册页面

最新推荐文章于 2024-10-05 11:25:59 发布

WANG鲲

最新推荐文章于 2024-10-05 11:25:59 发布

阅读量951

点赞数 14

分类专栏： CSS 文章标签：前端 javascript html css

本文链接：https://blog.csdn.net/m0_63751497/article/details/137140074

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML表单标签的使用，包括form、input的各种类型（如文本框、密码框、提交、重置按钮等），并提供了两个版本的登录注册页面代码实例，展示了如何设置表单属性和控件功能。

摘要由CSDN通过智能技术生成

表单标签：

双标签：form标签

基本语法：

<form action="提交跳转地址" method="提交方法">

文本/其他表单控件（输入框，密码框，单选，多选，等等）

</form>

属性取值：

            action======提交跳转地址；点击按钮的时候，配合form,能实现跳转

method======提交方法

        get==铭文提交：密码啥的都能看到===安全性低

        post==密文提交：密码啥的都看不到===安全性较高

        地址栏中

target======打开方式：新，原来

          _self 自己窗口打开（*）

          _blank 新的窗口打开（*）

          _top 顶部窗口打开

          _parent 父级框架打开

表单控件介绍：

就是表单中的输入框，密码框，下拉菜单，单选，多选等等===类似于一个按钮

基本语法：<input type="类型">

单标签

1）输入框:单行文本输入框

文本不会折行显示，能显示你输入的信息

type="text"

2）密码框

加密效果，不同的浏览器显示的加密效果有可能不同

type="password"

给添加一个value属性=====给输入框，给密码框一个值让你显示

提示文本===占位置的

H5===palceholder===占位符，提示文本信息不需要删除原来的提示信息，做到很好的一个增强用户体验度的问题

3）按钮类型的标签

<inpute type="类型">

a）提交

type="submit"

作用：配合form标签以及action实现提交跳转功能

b）重置

type="reset"

作用：用来取消输入框前面输入的所有信息，原来的信息清空掉

配合form标签

c）普通按钮

type="button"

作用：任何作用都没有

普通按钮中显示文本呢？

d）双标签button按钮

配合form标签以及action属性能完成跳转

实现登录注册页面代码（版本1）：

<!-- 
        name====应用在输入框和密码框中主要作用就是：为输入框和密码框起一个名字
            name属性的取值，用来暂存你输入的数据的值
      -->
     <h1>注册登录页面</h1>
     <form action="http://www.baidu.com" method="post" target="_blank">
        用户名：<input type="text" name="user"><br>
        密码框：<input type="password" name="upwd"><br>
        <input type="submit">
     </form>

实现效果：

实现登录注册页面代码（版本2）：

<h1>登录注册页面<h1>
<form action="http://www.baidu.com">
        输入框：<input type="text" placeholder="请输入用户名"><br>
        密码框：<input type="password" placeholder="请输入密码">
        <br>
        <input type="submit" value="登录"><br>
        <input type="reset"><br>
        <input type="button" value="button"><br>
        <button>双标签按钮</button>
     </form>

实现效果：