表单

1、表单的定义

　　　　　　表单是一块可采集用户数据的区域

               　　表单对后端开发者至关重要

2、如何创建表单区域

                     用form元素表示表单

                     用action属性表示表单的提交地址

                     用method属性表示表单的提交方式

                     在制作静态页面时，可不用书写上述的属性

                     在制作静态页面时，建议不要设置form元素的样式

3、表单中可放置哪些元素

　　　　　　对于静态页面的开发者，表单只是一个普通的块盒，内部可放置任何元素

                     通常情况下，表单中会放置一些可以与用户进行交互的元素，如文本框、  按钮、单选框、多选框、下拉列表。

                     由于这些交互元素通常出现在表单中，因此，我们常称之为表单元素

              表单元素的两个重要属性

                     name属性：表示发送到服务器的键名

                     value属性：表示发送到服务器的值

1）表单元素-文本框

　　　　　使用input元素表示一个文本框

                  input是一个空元素

              　可通过type属性设置文本框类型

　　最常用的文本框：　　　

　　　　type=text的属性：disabled禁用，readonly只读（可设value值）【pattern表示输入框验证规则，title为报错提示信息】、placeholder为输入框提示信息、value为设置默认内容、maxlenth指定字符最大长度、minlength指定字符最小长度。

　　　　type=submit表示提交按钮

　　　　type=password密码框

　　　　type=file文件选择框

　　其他一些不常用文本框：

 

 

2）表单元素—单选和多选框

              使用input元素表示单选和多选框

　　　　　　单选radio

<input type="radio" name="danxuan" id="radio1" value="men" checked>

        <label for="radio1">男</label>

        <input type="radio" name="danxuan" id="radio2" value="women">

        <label for="radio2">女</label>　

　　　　　　复选checkbox

<input type="checkbox" name="fuxuan" id="checkbox1">

        <label for="checkbox1">太阳</label>

        <input type="checkbox" name="fuxuan" id="checkbox2">

        <label for="checkbox2">下雨</label>

For和id名保持一致，单选和复选框的选中状态为：checked

3）表单元素—按钮

              使用input元素或button元素表示按钮

              按钮有很多种

                     普通按钮：点击后没有任何额外的效果

                     重置按钮：必须出现在表单中，点击后将其他表单元素重置为初始值

提交按钮：必须出现在表单中，点击后会将表单数据提交到服务器

                     图片按钮：功能同提交按钮一样，只不过样式为一张图片，该按钮已很少使用

              input和button的比较

                     input是空元素，button是普通元素

                     input是旧版本中的元素，button是HTML5中的元素

                     input按钮中只能写文本，button的内容更加丰富

                     input的兼容性更好，button稍差

4）表单元素—下拉列表

              使用select和option元素的组合表示下拉列表

              下拉列表的类型

                     1普通的下拉列表

<select name="fruit" id="">

            <optgroup label="第一组">

                <option value="xigua">西瓜</option>

                <option value="pingguo">苹果</option>

            </optgroup>

            <optgroup label="第二组">

                    <option value="xixi">西</option>

                </optgroup>

        </select>

Selected表示默认选择的状态，optgroup表示下拉列表分组，可不分组

                    2 选项分组的下拉列表

 <input type="text" list="city">

        <datalist id="city">

            <option value="gy"></option>

            <option value="ga"></option>

            <option value="cd"></option>

        </datalist>

主要用value设值

5）表单元素—数据列表和多行文本框

              使用datalist元素表达数据列表

　　　　使用textarea元素表达多行文本（type=text为单行文本）

 <textarea name="" id="" cols="30" rows="10"></textarea>

可通过设置col和rows设置行数和列数，也可在css直接设置宽高

6）表单元素的分组和状态

              使用fieldset和legend元素，对表单内容进行分组

<fieldset>

            <legend>主题</legend>

        <h4>文本框</h4>

        <input type="text" name="name" placeholder="填写姓名" autofocus class="text">

    </fieldset>

使用disabled属性和readonly属性，设置表单元素的可用状态

美化表单元素

              伪类focus：表示聚焦时候的样式，常用于表单元素：focus

　　　　Autofocus表示自动聚焦的状态

              认识表单元素的默认样式

                     表单元素均默认为行盒——水平排列

                     表单元素均为可替换元素——可设置盒模型中各个部分的尺寸

                     文本框聚焦时会有outline