HTML中与表单有关的知识点(第一部分）

首先在学习之前需要明白我们需要学的知识有哪些

最终目标就是能自己写出来上面的表单

文本框

如表单所示有账号(姓名)输入和密码输入

姓名:<input type="text">
输入单行文本，不换行
<br>
密码框:<input type="password">
<!-- 密码以黑点形式显示 -->

但是仔细观察表单会发现姓名后面的输入框里面有字，改进后的代码如下

 	姓名:<input type="text" placeholder="请输入真实姓名">
    <br><br>
    密码：<input type="password" placeholder="请输入密码">
    <br><br>
    确认密码：<input type="password" placeholder="请输入确认密码">
    <br><br>

单选框和多选框

基本语法

单选框: <input type="radio">
多选框: 兴趣爱好:
<input type="checkbox" > html
<input type="checkbox" > python
<input type="checkbox" > 前端

效果如图:

再进一步考虑，每个网站使用群体不一样，基本都有默认选项，这个该怎么实现呢?

加checked

<input type="radio" checked>男
<input type="radio" >女
<input type="checkbox" checked> html
<input type="checkbox" > python
<input type="checkbox" > 前端

此时单选框还没实现单选功能，如何实现？

加属性

<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女

这里name就是属性，编程中取名一般要见名知意，要在男和女之间单选所以这两个属性一样

好了到现在位置单选功能已经实现了，但是还有点小瑕疵，就是每次必须点到那个圈里才能实现单选功能

改进如下

label标签
作用:增大表单控件的点击范围(单选点“男”也可以选上了)

   性别：
    <label><input type="radio" name="gender">男</label>
    <label><input type="radio" name="gender" checked>女</label>