认识HTML一一Label标签(掌握)

2019-04-26  本文已影响0人  周行知

LabeI标签

1.默认情况下文字和输入框是没有关联关系的。也就是说点击文字输入框不会聚焦,如果想点击文字时让对应的输入框聚焦,那么需要让文字和输入框进行绑定。

【深入理解】

意思就是你点击文字"账号",但输入框没反应,聚焦其实就是你点击“账号”文字,输入框会让你输入账号。

解决方案:

要想让输入框和文字绑定在一起,那么我们可以使用Label标签。

代码具体演绎如下:

<form action="https://www.jianshu.com/"><label for="account">账号:</label><input type="text" name="zhouxingzhi" id="account"/><br/>

<label for="pwd">密码:</label><input type="password" name="123456" id="pwd"/><br/>

</form>

整体代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>表单</title>

</head>

<body>

<form action="https://www.jianshu.com/">

<label for="account">账号:</label><input type="text" name="zhouxingzhi" id="account"/><br/>

<label for="pwd">密码:</label><input type="password" name="123456" id="pwd"/><br/>

</form>

</body>

</html>

结果如图所示:

绑定的格式:

1.将文字利用label标签包裹起来

2.给输入框添加一个id属性

3在label标签中通过for属性输入框id进行绑定即可。

条条大道通罗马,不推荐做法:

<label >账号:<input type="text" name="zhouxingzhi" /><br/></label>

上一篇 下一篇

猜你喜欢

热点阅读