版权声明:原创不易,转载请注明出处~ https://blog.csdn.net/qq_34266804/article/details/87429535
如上图所示,必须选中复选框才可以选中。代码如下图所示:
<body>
<span style='color:red;font-size:30px;'>
This is my JSP page. <br>
</span>
<form action="hello1" method="post">
<label>姓名:</label>
<input name="name"><br>
QQ:
<input type="checkbox" name="contact" value="qq"/>
Tel:
<input type="checkbox" name="contact" value="Tel"/>
WeChat:
<input type="checkbox" name="contact" value="WeChat"/><br>
<input type="submit" value="OK"/>
</form>
</body>
但是我们想要实现的下图那样,点击文字就可以选中复选框,比较简洁些:
方法一:加id的
代码如下图所示:
<body>
<span style='color:red;font-size:30px;'>
This is my JSP page. <br>
</span>
<form action="hello1" method="post">
<label>姓名:</label>
<input name="name"><br>
<label for="qq">QQ:</label>
<input id="qq" type="checkbox" name="contact" value="qq"/>
<label for="Tel">Tel:</label>
<input id="Tel" type="checkbox" name="contact" value="Tel"/>
<label for="WeChat">WeChat</label>
<input id="WeChat" type="checkbox" name="contact" value="WeChat"/><br>
<input type="submit" value="OK"/>
</form>
</body>
方法二:不需要加id的,用lable将对应的包住就可以了
代码:
扫描二维码关注公众号,回复:
5218197 查看本文章
<body>
<span style='color:red;font-size:30px;'> This is my JSP page. <br>
</span>
<form action="hello1" method="post">
<label>
姓名:
<input name="name"><br>
</label>
<label>
QQ:
<input type="checkbox" name="contact" value="qq" />
</label>
<label>
Tel:
<input type="checkbox" name="contact" value="Tel" />
</label>
<label>
WeChat
<input type="checkbox" name="contact" value="WeChat" /><br>
</label>
<input type="submit" value="OK" />
</form>
</body>