HTML登录表单的制作

最新推荐文章于 2024-03-26 15:07:27 发布
最新推荐文章于 2024-03-26 15:07:27 发布
阅读量4.4k 收藏 22
点赞数 7
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51346837/article/details/116307263
版权
表单的知识点总结
  1. form必须有action属性，表示提交地址
  2. 所有需要提交的数据，input必须有name属性
  3. input按钮的文字，使用value属性表示
  4. input必须放在form标签才能提交
input标签常见类型总结
文本输入框 密码输入框 单选框 复选框
type"text" type"password" type"radio" type"checkbox"
普通按钮 提交按钮 重置按钮 文件选择按钮
type"button" type"submit" type"reset" type"file"

简单的表单样例如下：
在这里插入图片描述
表单制作代码

<!DOCTYPE html>
<html lang="en">
<head>
    <metame="viewport" content="width=device-width, initial-scale=1.0">
    <title>Da charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta nocument</title>
</head>
<body>
    <form action="https://www.baidu.com/">
        <table width="600px" border="1px" cellspcing="0">
            <tbody>
                <tr height="40px">
                    <td rowspan="4" align="center">总体信息</td>
                    <td colspan="2"></td>
                </tr>
                <tr height="40px">
                    <td align="right">用户名：</td>
                    <td>
                        <input type="text" name="loginname">
                    </td>
                </tr>
                <tr height="40px">
                    <td align="right">密码：</td>
                    <td>
                        <input type="password" name="pwdname">
                    </td> 
                </tr>
                <tr height="40px">
                    <td colspan="2" align="center">
                        <input type="submit" value="提交">
                        <input type="reset" value="重置">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
    
</body>
</html>
The Qing
关注
  • 7
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
html:简单的登录界面+表单提交/验证
2302_76310478的博客
07-15 806
登录登录
HTML制作表单ppt课件.ppt
11-15
HTML制作表单ppt课件.ppt
HTML知识整理(form表单简单实现登录注册界面)
qq_53909398的博客
01-09 4100
代码段： <!----注释 from表单:作用收集用户的基本信息 <from>内容</from> 表单属性:action 服务器地址 比如:192.168.1111.3:8080 method 提交方式 post get 其中post更加安全 下面是默认登录注册界面的写法 -----> <!DOCTYPE html> <html> <head> <title>from表单</t.
基于HTML，CSS，JavaScript实现用户登录功能的简单表单制作
qiufen_shichufa的博客
01-23 3050
基于HTML，CSS，JavaScript实现用户登录功能的简单表单制作 使用到的基本知识 1. 简单的HTML语句： form表单 <form action="http://www.localhost:8080/oa/save" method="get" id="form"></form> input标签以及span标签 用户名<input type="text" name="username" id="username" /><span id="s
html学习笔记，登陆表单
最新发布
一季南凉的博客
03-26 696
这段代码是一个HTML表单，通常用于Web页面上实现用户登录功能它包含了两个输入字段，让用户输入用户名和密码，以及两个按钮，分别用于提交表单和重置表单内容还有一个链接供用户在没有账号时跳转到注册页面。里面用到的JSP表达式 用于动态生成表单提交的URL，确保无论应用部署在哪里，表单的action总是指向正确的路径。action 属性定义了表单提交（即用户点击登录按钮）后数据发送的目的地。
30个最佳免费的CSS HTML登录表单模板
jinyeweiyang的专栏
10-09 7112
CSS3 Login Form Template An amazing css3 login form template with only html, css features being used. Download and use this as you like. Download Login and Registration Form with HTML5 an
【HTML/CSS】简单登录注册表单制作
m0_49442965的博客
11-09 3695
Microsoft Edge这个浏览器就不显示（支持）background-size包含在background这个复合属性里面。上述这种写法是对的，我的HTML书本上还包含有background-size属性，我建议这个单独写，至于正则表达式，我还是喜欢在JS里面单独判定给出提示。
使用Html做一个简单的登陆页面
热门推荐
桑稚远方的博客
04-05 3万+
有了登录按钮后，在我们的认知下，肯定按了登录会跳到下一个页面，但是今天只是展示做一个简单的登陆界面，就不写跳转和账号密码验证了；登录页面一般就是账号和密码，另外还需要验证码验证需求，这三个常见的属性是一个项目登陆界面重要组成要素；2.账号密码有了之后，下一步就需要登录了，登录是一个按钮，按钮是一个标签。，所以就不使用验证码了，因为验证码在一个项目中是放在后端的，这次就不做演示；不好意思兄弟们，本人没有美感，尽力了，你们自己找好看的点自己修改；如下面的代码，这一步很简单；
登录和注册表单的11个HTML最佳实践
JudyC的博客
07-25 974
大多数网站都有登录或注册表单;它们是业务转换的关键部分。然而，即使是流行的站点也没有实现本文中提到的11个最佳实践，并且至少有一个错误。所以，阅读这篇文章，然后检查你的表单，并通过使用HTML技术来改善你的用户体验。
HTML5的表单——登录界面
夏天De风ly
03-27 1万+
表单：负责采集用户输入的信息，由相当多的表单元素组成。 基本语法： method：get和post，默认为get。用这种方式提交数据用于设置表单数据的提交方式，保密性差且有数据量限制。post不但保密性好，还可以提交大量的数据。 <form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </form> 表单...
【HTML5】登录页面制作简易版
我的主页
11-20 2万+
本期讲解：form表单的简单用法，以及class属性用法，并且实现简易的登录页面。
9款大气实用的HTML5/CSS3注册登录表单
yanyiping992的博客
11-25 2163
注册和登录基本上是每一个网站都会有的功能，那么如何让用户在注册和登录这个环节上有更好的用户体验呢？随着现代浏览器的发展，我们就可以用HTML5和CSS3来制作炫酷的注册登录表单，下面我们收集了9款大气实用的HTML5/CSS3注册登录表单，希望你会喜欢。1、HTML5/CSS3仿Facebook登录表单利用CSS3制作的登录表单的确很漂亮，我们在html5tricks网站上也分享过几款了，比如CS...
html表单制作及多种实例
11-09
html表单制作及实例HTML表单是一种允许用户输入数据的网页元素。表单数据可以通过各种方式发送到服务器进行处理。下面是一个简单的HTML表单的例子：具体见附件 这个表单有两个文本输入字段（名和姓），一个提交按钮...
html表单制作及实例 + 打卡表单设计
11-12
html表单制作及实例
信息登记表网页登录表单
05-27
1.用相应的HTML标记来搭建网页结构 2.使用CSS控制表单样式，制作一个信息登记表 3.表单信息包括登录名，姓名，年龄，出生日期，邮箱，号码等
HTML-表单标签制作注册页面
07-22
HTML中使用表单标签制作注册页界面，表单标签重要的是使用type属性
HTML5基础学习（7）：登录表单制作、表单知识补充
游王子的博客
09-18 1279
一、登录表单 有的时候用户需要填写信息，然后把填写完的信息交给服务器。把数据提交给服务器的动作就需要一个新的知识点：表单。 （1）常见的表单控件 大部分的表单控件都是<input>编写出来，根据<input>标签中type属性的不同，控件也就不同： text：定义供文本输入的单行输入字段 password：定义密码字段 submit：定义提交表单数据至表单处理程序的按钮。 reset：定义重置表单按钮。 radio：定义单选按钮。 checkbox：...
html表单设置2个登入方式,Spring Security 表单登录功能的实现方法
weixin_42395498的博客
06-29 625
1.简介本文将重点介绍使用 Spring Security登录。 本文将构建在之前简单的 Spring MVC示例 之上，因为这是设置Web应用程序和登录机制的必不可少的。2. Maven 依赖要将Maven依赖项添加到项目中，请参阅Spring Security with Maven 一文。 标准的 spring-security-web 和 spring-security-config 都是必...
用HTML语言制作表单的登录界面（包括常用标签的注释）
whatidonot的博客
10-21 2621
表单 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- form表单 label中for 可以指定id 作用是鼠标指针不用放在输入框内输入 直接点击账号就可以输入 value表示输入的值直接可以放进去 size可以规定输入框的长度 placeholder可以
html表单登录页面
03-05
HTML表单登录页面是一种常见的用户认证方式，用于用户在网站或应用程序中输入用户名和密码进行登录。以下是一个简单的HTML表单登录页面的示例： ```html <!DOCTYPE html> <html> <head> <title>Login Page</title> </head> <body> <h2>Login</h2> <form action="login.php" method="POST"> <label for="username">Username:</label> <input type="text" id="username" name="username" required><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password" required><br><br> <input type="submit" value="Login"> </form> </body> </html> ``` 在上面的示例中，我们使用`<form>`元素创建了一个表单，并将其`action`属性设置为`login.php`，表示在用户提交表单时将数据发送到`login.php`处理。`method`属性设置为`POST`，表示使用POST方法发送表单数据。 表单中包含两个输入字段：用户名和密码。`<input>`元素用于创建输入字段，`type`属性设置为`text`和`password`分别表示文本输入和密码输入。`id`属性用于标识字段，`name`属性用于指定字段的名称，这些名称将在后端处理程序中使用。 最后，我们使用`<input>`元素创建了一个提交按钮，用户点击该按钮后将提交表单数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值