11.19表单元素

表单元素

一系列元素，主要用于收集用户信息

input元素

空元素

是一个输入框

• 属性type

表示输入框类型
取值可以为：
text（普通文本输入框）
password（密码框）
checkbox（多选框）后面可以加文字表示选项的内容，通过name属性对选项进行分组，还可以对选项加上布尔属性checked，表示默认选中
radio（单选框）后面可以加文字表示选项的内容，通过name属性对选项进行分组，还可以对选项加上布尔属性checked，表示默认选中
file（选择文件）
date（日期选择框）
search（搜索框）
range（滑块区） 可以通过max、min属性控制最大最小值
color（颜色选择）
number（数字输入框） 可以通过max、min属性控制最大最小值，step属性控制步长

当type属性值为reset（重置）、button（普通）、submit（提交）时，input表示按钮

• value属性

表示输入框的值，内容

• placeholder属性

显示提示的文本，文本框没有内容时显示

举例

<input type="text" name="" id="" placeholder="11111">
<!-- 普通单行文本输入框 -->
<input type="radio" name="sex">nan
<input type="radio" name="sex" checked>nv
<!-- 单选框 -->
<input type="checkbox" name="hobby" checked>huang
<input type="checkbox" name="hobby">du3
<input type="checkbox" name="hobby" checked>du2
<!-- 多选框 -->
<input type="submit" value="这是一个提交按钮">
<!-- 提交按钮 -->

大概是这样，其他的type取值可以另外试试

input:text 这样写可以快速确定type的值

select元素

下拉列表选择框

子元素可以是option元素，optgroup元素

option元素表示下拉列表的选项，可以加入布尔型属性selected表示默认选项

optgruop元素表示对option元素进行分组，使用lable属性设置显示内容

注意，optgroup元素并不是选项，无法被选中

select元素加上布尔型属性multiple可以变为多选列表，按住ctrl可以多选

比如

<select name="" id="">
    <optgroup label="我是谁">
        <option value="">woshishe</option>
        <option value="">kadaya</option>
        <option value="" selected>pikaqiu</option>
        <option value="">miaowazhongzi</option>
        <option value="">jienigui</option>
        <option value="">benhuolong</option>
    </optgroup>
    <optgroup label="数字几">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
    </optgroup>
</select>
<!-- 单选列表 -->
<select name="" id="" multiple>
    <optgroup label="我是谁">
        <option value="">kadaya</option>
        <option value="" selected>pikaqiu</option>
        <option value="">miaowazhongzi</option>
        <option value="">jienigui</option>
        <option value="">benhuolong</option>
    </optgroup>
    <optgroup label="数字几">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
    </optgroup>
</select>
<!-- 多选列表 -->

textarea元素

文本域，一个大的文本框

cols rows可以设置它的大小，但是建议用CSS的width跟height控制它的大小

textarea里面的内容不会发生空白折叠

textarea也可以用placeholder属性设置提示文本

如

    <textarea cols="30" rows="10" placeholder="随便写点什么吧"></textarea>

button元素

• type属性：reset、submit、button，默认值是submit

直接在button元素里面写东西就可以了

表单状态

• readonly属性，布尔属性，表示只读

• disabled属性，布尔属性，表示禁用，会改变表单显示样式

其他配合表单元素的元素

label元素

通常与单选、多选框进行连用达到点击文字也可以进行选择的效果

方法

• 1. 利用for属性，for里面写id，

例如

<input type="radio" name="sex" id="male">
<label for="male">男</label>
<input type="radio" name="sex" id="female">
<label for="female">女</label>
<input type="radio" name="sex" id="warma">
<label for="warma">沃尔玛购物袋</label>

• 2. 直接用label把input元素包起来

例如

<label><input type="radio" name="sex">男</label>
<label><input type="radio" name="sex">女</label>
<label><input type="radio" name="sex">沃尔玛购物袋</label>

datalist元素

数据列表

元素本身不会显示到页面上，通常与普通文本框配合，效果不好言传，意会即可

使用方法如下

    <input type="text" list="fruits">
    <!-- 用list引用datalist -->
    <datalist id="fruits">
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
        <option value="watermelon">西瓜</option>
        <option value="pineapple">菠萝</option>
        <option value="lack of vocabulary">我词穷啦</option>
    </datalist>
    <!-- value里面是要填进文本框的值，外面是显示在value下面的字 -->

form元素

通常，会将整个表单元素全部放进form元素里面，使提交表单的时候会将form元素内部的表单内容以合适的方式提交到服务器

但是对于静态页面来说，form元素并没有什么实际的用处，涉及到了后端以及服务器相关的知识

表单元素的name属性表示提交给服务器的时候的名字，如果是文本框的话，name对应的值是文本框里面的内容，如果是下拉列表的话，name对应的值是value的值

fieldset元素

对表单进行分组

• 子元素legend 表示分组名称

• 用法

把想要分到一组的表单用fieldset元素套起来即可
想要加分组名称的话在fieldset元素里面加上子元素legend即可

大概是这样

    <fieldset>
        <legend>来分个组</legend>
         输入水果
        <input type="text" >
        输入密码
        <input type="password">
        <button type="button">好玩</button>
    </fieldset>