HTML基础表单练习----用户登录界面

已于 2022-05-19 21:50:10 修改
阅读量2.1k 收藏 19
点赞数 2
分类专栏： web 前端 文章标签： html5
于 2021-02-07 14:23:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45626589/article/details/113740359
版权

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单练习</title>
		<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
	</head>
	<body>
		<div class="container">
			<h3>学生信息管理系统mis</h3>
			
			<div >
				<label label for="name">姓名：</label>
				<!-- 文本输入框，h5新特性placeholder属性 -->
				<input type="text" name="name" id="name"
					class="form-control" placeholder="请输入姓名..."
				/>
			</div>
			
			<div>
				<label label for="age">年龄：</label>
				<input type="number" name="age" id="age"
					class="form-control" placeholder="请输入年龄..."
				/>
			</div>
			
			<div class="form-group">
				<label for="sex">性别：（单选框）</label>
				<!-- radio互斥，同名会只能选择一个 --> 
				<div class="radio-inline">
					<input  type="radio" name="sex" id="sex" checked="checked"/> 男
				</div>
				<div class="radio-inline">
					<input type="radio" name="sex" id="sex"/> 女
				</div>
			</div>
			
			<div class="form-group">
				<label>爱好：（多选）</label>
				<div class="radio-inline">
					<input type="checkbox" checked="checked" name="hobby" id="hobby"/> 乒乓球
				</div>
				<div class="radio-inline">
					<input type="checkbox" name="hobby" id="hobby"/> 爬山
				</div>
				<div class="radio-inline">
					<input type="checkbox" name="hobby" id="hobby"/> 唱歌
				</div>
			</div>
			
			<div class="form-group">
				<label>学历：（下拉框）</label>
				<!-- 单选，选择“幼儿园”，表单提交“1”，性能高-->
				<select class="radio-inline" name="edu" id="edu">
					<optgroup label="低学历">
						<option value="1">幼儿园</option>
						<option value="2">小学</option>
						<option value="3">初中</option>
						<option value="4">高中</option>
						<option value="5">大专</option>
					</optgroup>
					
					<optgroup label="高学历">
						<option value="6" selected="selected">本科</option><!--默认-->
						<option value="7">研究生</option>
						<option value="8">博士</option>
						<option value="8">教授</option>
					</optgroup>
					
				</select>
			</div>
			
			<div class="from-group">
				<input class="btn btn-primary" type="button" name="submit" value="保存"/>
				<button class="btn btn-danger" name="clear">取消</button>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style type="text/css">
        div{
            color: blue;
        }
        P{
            color: darkslategrey;
        }
        legend{
            color: yellowgreen;
        }
        input{
            color: sienna;
        }
        input:not(.radio.checkbox){
            padding: 4px;
            border: solid 1px #E5E5E5;
            outline: 0;
            font: normal 13px/100% Verdana,Tahoma,SansSerif;

            box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;
        }

    </style>
    <link href="123.css" rel="stylesheet" type="text/css">
</head>
<body>
<header><h1><div style="color: crimson">用户信息登录</div></h1></header>
    <form action="#" class="form1">
        <fieldset class="fld1">
            <legend>个人信息</legend>
            <p><label for="name">
            姓名:<input id="name" type="text" placeholder="请输入你的名字"/></label></p>
            <p><label for="addres">地址:<input id="addres" type="text" placeholder="请输入你的地址"/></label></p>
            <p><label>性别:
                <input type="radio" id="1" name="men" value="1" checked="1" class="radio"/>男
                <input type="radio" id="1" name="men" value="2" class="radio"/>女
            </label></p>
            <p><label for="minzu">民族:
                <input type="radio" id="minzu" name="mz" value="1" class="radio">汉族
                <input type="radio" id="minzu" name="mz" value="2" checked="2" class="radio">少数民族
            </label></p>
            <div>请选择你的省份:</div>
            <select name="city">
                <optgroup label="南方地区">
                    <option value="1">云南</option>
                    <option value="2">贵州</option>
                    <option value="3">四川</option>
                    <option value="4">武汉</option>
                </optgroup>
                <optgroup label="北方地区">
                    <option value="5">北京</option>
                    <option value="6">天津</option>
                    <option value="7">内蒙古</option>
                    <option value="8">哈尔滨</option>
                </optgroup>
            </select>

        </fieldset>

        <fieldset class="fld4">
            <legend>快速注册</legend>
            <P><label for="yonghuming">
                用户名:<input type="text" id="yonghuming" placeholder="请输入你的用户名" />
            </label></P>
            <p><label for="mima">
                密码:<input type="password" id="mima" placeholder="请输入你的密码"   required="required" />
            </label></p>
            <p><label for="email">
                邮件:<input type="email" placeholder="请输入你的邮箱" id="email" />
            </label></p>
            <table>
                <tr>
                    <td><button>+</button>密保问题</td>
                    <td>答案</td>
                </tr>
                <tr>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                </tr>
            </table>
        </fieldset>
        <fieldset class="fld3">
            <legend>请写下你的建议:</legend>
            <textarea rows="8" cols="50" placeholder="请填写详细的建议"></textarea>
        </fieldset>
        <input align="center" type="submit" value="提交"/>
        <input type="button" value="确认">
        <input type="image" src="img/tu1.jpg" height="15" width="30">
    </form>
</body>
</html>
Java搬码工
关注
  • 2
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jsp登陆界面源代码
09-14
登录页面 用户名: 密码: 身份验证 <jsp:param name="userName" value=""/> 登录成功 总共3个jsp文件，第一个是login.jsp,第2个是judge.jsp,第3个是afterLogin.jsp
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网页制作之简单登入界面
不蒸馒头曾口气的博客
03-04 745
【代码】html网页制作之简单登入界面。
使用Html做一个简单的登陆页面
热门推荐
桑稚远方的博客
04-05 3万+
有了登录按钮后，在我们的认知下，肯定按了登录会跳到下一个页面，但是今天只是展示做一个简单的登陆界面，就不写跳转和账号密码验证了；登录页面一般就是账号和密码，另外还需要验证码验证需求，这三个常见的属性是一个项目登陆界面重要组成要素；2.账号密码有了之后，下一步就需要登录了，登录是一个按钮，按钮是一个标签。，所以就不使用验证码了，因为验证码在一个项目中是放在后端的，这次就不做演示；不好意思兄弟们，本人没有美感，尽力了，你们自己找好看的点自己修改；如下面的代码，这一步很简单；
html表单学生管理功能例子,C# 学生信息管理系统 源码
weixin_30093045的博客
06-09 333
【实例简介】首先附加数据库，管理员账号 admin 密码 00000教师账号t001 密码 12345学生账号SunPeng 密码 12345【实例截图】【核心代码】using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;us...
基于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
【HTML5】登录页面制作简易版
我的主页
11-20 2万+
本期讲解：form表单的简单用法，以及class属性用法，并且实现简易的登录页面。
html好看的登录界面2（十四种风格登录源码）
xcLeigh
06-15 2万+
html好看的登录页面2（十四种风格登录源码），登录页面源码，大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有。
HTML5的表单——登录界面
夏天De风ly
03-27 1万+
表单：负责采集用户输入的信息，由相当多的表单元素组成。 基本语法： method：get和post，默认为get。用这种方式提交数据用于设置表单数据的提交方式，保密性差且有数据量限制。post不但保密性好，还可以提交大量的数据。 <form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </form> 表单...
HTML——1、制作简单的登录/注册页面
wei101120的博客
12-16 3502
【代码】HTML——1、制作简单的登录/注册页面。
Form表单的简单使用
chenmo2001的博客
05-27 2967
Form表单的简单使用 简介 表单是一个包含表单元素的区域，用于搜集不同类型的用户输入。表单元素是允许用户在表单中（比如：文本域、下拉框、单选框、复选框等等）输入信息的元素。表单使用表单标签<form>定义。 布局 完成布局的第一步：创建一个新的项目。 第二步：把我们需要的文件引入进去。 主要有这三个： 可通过栅格系统进行布局 Bootstrap提供了一些表单控件样式、布局选项、以及用来创建广泛多样化的表单的自定义组件。 表单控件 1....
12-表单标签.html
12-19
12-表单标签.html
E-mail表单递交
01-20
E-mail表单递交</TITLE></HEAD><BODY > [removed]<!–function validate_form() { validity = true; if (!check_empty(document.form.NAME.value)) { validity = false; alert(‘对不起...
PHP动态网站开发任务-表单界面设计及数据验证.pptx
11-14
PHP动态网站开发任务-表单界面设计及数据验证.pptx
form-generator 表单设计
11-10
Element UI表单设计，将生成的代码直接运行在基于Element的vue项目中,也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。 npm i [email protected] npm install [email protected] --save npm install ...
基于ElementUI的表单设计器f-render设计源码
最新发布
04-08
f-render表单设计器 - 基于ElementUI开发，包含60个文件，如JS、VUE、MD、JSON、BROWSERSLISTRC、YML、GITIGNORE、NPMIGNORE...该设计器为用户提供了基于ElementUI的表单设计功能，帮助用户快速构建和定制复杂的表单。
html用form表单做一个简约漂亮的登录页面
Louke_lixianqi的博客
04-15 5023
html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户登录界面</title> <link rel="stylesheet" href="./style.css"> <link rel="shortcut icon" href="icon.png" type="image/x-ic
HTML知识整理(form表单简单实现登录注册界面)
qq_53909398的博客
01-09 4098
代码段： <!----注释 from表单:作用收集用户的基本信息 <from>内容</from> 表单属性:action 服务器地址 比如:192.168.1111.3:8080 method 提交方式 post get 其中post更加安全 下面是默认登录注册界面的写法 -----> <!DOCTYPE html> <html> <head> <title>from表单</t.
表单提交input输入框设为只读
weixin_42485577的博客
09-04 598
方法一 使用readonly <input type="text" class="form-control" name="test" id="test" value=" " readonly/> 可在js中给input标签赋值 $("#test").val(123); 方法二 使用disabled <input type="text" class...
element-plus写登陆界面
05-25
要使用 Element Plus 创建一个登录界面，可以使用以下步骤： 1. 导入 Element Plus 组件库： ```js import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'; ``` 2. 在模板中使用组件： ```html...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值