7-表单元素

表单元素

表单元素是网页中提供给用户进行点击或者输入的控件

1、form标签

form是表单的意思

form是容器级标签，内部存放可输入的控件。如果输入的表单需要提交到数据，所有的控件需要被form表单包裹

method：方法的意思，指的数据提交的方法，属性值是post和get

action：是数据提交的位置

2、input标签

input标签是输入框的一种，但是不仅仅只有输入框，通过type属性，可以拓展多功能

input的type属性非常丰富

2.1 输入框

输入框有两个重要属性，一个是value，一个placeholder

value：设置默认显示的内容，属性值为自定义内容

placeholder： 属性作用是如果没有value的时候提示用户的文字占位符

<input type="text" placeholder="请输入用户名">

2.2 密码框

通过type值为password设置的

显示效果是输入后通过掩码形式显示的

<input type="password" placeholder="请输入密码">

2.3 单选框

通过type值为radio设置的

单选按钮都是成组出现的

要想实现一组单选按钮的互斥，需要设置相同的name属性

<p>

  性&nbsp别：

  <input type="radio" name='sex'>男

  <input type="radio" name='sex'>女

  <input type="radio" name='sex'>保密

</p>

2.4 复选框

也叫多选框，通过type值为checkbox设置

复选框可以通过对自身进行多次点击实现选择或者取消

多选框可以选择一个或者多个，建议同一组设置同样的name属性

<p>
    爱&nbsp;好：
    <input type="checkbox" name="hobby"> 运动
    <input type="checkbox" name="hobby"> 绘画
    <input type="checkbox" name="hobby"> 音乐
    <input type="checkbox" name="hobby"> 阅读
    <input type="checkbox" name="hobby"> 其他
</p>

单选框和多选框都有一个默认被选择的功能，需要给input标签添加一个checked=“checked”

<p>
    性&nbsp;别：
    <input type="radio" name='sex' checked="checked">男
    <input type="radio" name='sex'>女
    <input type="radio" name='sex'>保密
</p>
<p>
    爱&nbsp;好：
    <input type="checkbox" name="hobby"> 运动
    <input type="checkbox" name="hobby" checked="checked"> 绘画
    <input type="checkbox" name="hobby"> 音乐
    <input type="checkbox" name="hobby"> 阅读
    <input type="checkbox" name="hobby"> 其他
</p>

现在有一个现象就是如果点击文字是不能触发对应单选或者多选框的点击事件的，所以需要label标签去扩大触发范围

<label>
    <input type="radio" name='sex' checked="checked">男
</label>

2.4 文本域

标签是textarea

我们之前学习的input的单行输入框，只能输入单行文本，如果需要使用多行文本，就使用textarea标签

textarea是一个双标签，是文本级标签

属性值rows和cols

rows：定义文本域的可视区域有几行，单位是数字

cols：当前行显示的字节数量（以英文为准），单位师数字

placeholder：占位符

我们发现textarea默认是可以通过拖动右下角实现放大或者缩小文本域的，如果我们不希望缩放文本域

我们可以通过设置style性的resize属性，值为none，去掉可拖拽区域

<textarea rows="4s" cols="50"  placeholder="请输入自我介绍" style="resize:none"></textarea>

2.6 下拉菜单

需要一组标签进行制作

需要两个标签select和option

select英文就是选择的意思，表示搭建下拉项

option英文是选项的意思，表示搭建下拉项

关系：select>option

<select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
</select>

现在默认的第一个是显示，并不是被选中的，如果希望有默认被选中想，使用selected属性，值也是selected

<select>
    <option>北京</option>
    <option>上海</option>
    <option selected="selected">              广州</option>
    <option>深圳</option>
</select>