用户登陆页面前端（附源码）

最新推荐文章于 2024-05-17 04:26:22 发布

朱振玉小迷弟

最新推荐文章于 2024-05-17 04:26:22 发布

阅读量1.3k

点赞数 1

分类专栏： Vue学习笔记（带源码）文章标签： html js css vue

本文链接：https://blog.csdn.net/weixin_50357864/article/details/115261225

版权

Vue学习笔记（带源码）专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>用户登录切换小案例</title>
	</head>
	<body>
		<div id="app">
			<span>
				<label>
					用户名:
					<input v-if="isUser" type="text" placeholder="请输入您的QQ号码" maxlength="10" />	
					<input v-else type="text" placeholder="请输入您的邮箱账号" maxlength="32" />
				</label>	
			</span>
			<button @click="isUser = !isUser" type="button">切换登陆方式</button>
			<div>
				<label>
					密码:
					<input type="password" maxlength="16"/>
				</label>
			</div>
		</div>
		<script src="./js/vue.js"></script>
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					isUser:true
				}
			})
		</script>
	</body>
</html>

二、涉及到的知识点

1、label标签

HTML中的label标签和span标签类似，不会向用户呈现特殊的效果，但它与span标签不同的一点是它可以关联特定的表单控件。
label标签和特定表单控件关联之后，如果用户在 label 元素内点击文本，就会触发关联的表单控件。就是说，当用户选择该label标签时，浏览器就会自动将焦点转到和label标签相关的表单控件上。
在上面的源码中，当用户点击“用户名：”或者“密码：”时，就会发现，对应的文本框会聚焦。

label标签和特定表单元素关联方式

label标签与特定表单元素关联的方式有两种：显式关联和隐式关联。

1）显式关联

显式关联是通过label标签的for属性，显式与另一个表单控件关联。需要注意的是，for属性的值必须是与label标签在同一文档中的可标记表单元素的id，注意是id而不是name。如：

爱好：
<input type='checkbox' name='basket' id='basketball'>   
<label for="basketball">篮球</label>
<input type='checkbox' name='football' id='football'>   
<label for="football">足球</label>

2)隐式关联

隐式关联是直接将表单控件放到label标签内，这种情况下，label标签只能包含一个表单元素，包含多个只对第一个有效。如：

<label>点击我可以使文本框获得焦点
    <input type='text' name='theinput' id='theinput'>
</label>

2、input标签中的maxlength属性

如字面意思，maxlength属性用于限制文本框中的最大可输入字符数，很简单也比较常用的一个属性。

朱振玉小迷弟

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用户登陆页面前端（附源码）

一、源码<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>用户登录切换小案例</title> </head> <body> <div id="app"> <span> <label> 用户名: <input v-if="isUser" type="
复制链接

扫一扫