9.表单,input标签,单选框

一.表单,input标签

  表单可以用来收集用户的信息,用来充当登录页面,注册页面,搜索页面

我们可以看到,表单里面,有一些文本框,密码框,单选多选框,还有的表单可以上传文件,这些我们可以通过<input>标签来实现,当然<input>标签只能实现这些输入框,其他的装饰得用CSS来实现

文本框: <input type="text">
<br><br>
密码框: <input type="password">
<br><br>
单选框: <input type="radio">
<br><br>
多选框: <input type="checkbox">
<br><br>
上传文件: <input type="file">
<br><br>

<br>标签是干什么的呢,忘记的去前面复习.我们看到,<input>是单标签,而且标签内有type属性,属性值的不同,导致<input>标签在网页实现的功能不同,有文本框(text),密码框(password),单选框(radio),多选框(checkbox),上传文件(file).

还有一个<input>标签占位文本,就是placeholder属性, 用于文本框,密码框,使得在框内有提示性文字

文本框: <input type="text" placeholder="请输入用户名">
<br><br>
密码框: <input type="password" placeholder="请输入密码">

二.单选框

  接下来我们单独讲一下单选框,我们在上面的图片可以看到,单选框,怎么只有一个选项,如何插入多个选项,我们可以这样

<input type="radio">男
<input type="radio">女

这样就出现了两个选项,那现在这样还是没什么问题的,那如果我这样呢:

<input type="radio">男
<input type="radio">女
<input type="radio">成年
​

这时候是不是有点乱套了,这时候的结果是

不是哥们你看这对吗,乱套了都,而且不是单选框吗,三个同时选是不是有点不太对,这时候就有一个name属性,可以用来分组,而且保证同组只能选一个,name属性值我们可以按照不同组的类型来填写

​
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<br>
<input type="radio">成年
​

​

然后在不同组的单选框里面加上<br>标签,不就齐活了吗这样是不是就对味了.

除此之外还有一个checked属性,这个属性名与属性值相同,所以直接写就行,这个作用是默认选中,比如一些化妆品的调查名单里的性别选择,是不是大部分都会是女生填写,那直接默认选择女是不是会方便很多

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

如有错误,欢迎指错