H5+C3 day3 表单元素

1.表单：

            什么是表单：登录注册时，填写账号密码等信息地方就叫做表单；

            表单的作用：收集用户信息

        表单域标签：

            <form action = '接口地址' method = "post" name = '表单名称'>

                表单元素...

            </form>

            属性：

                action = '接口地址' （用于指定接受并处理表单数据的服务器程序的url地址）    

                method = 'get / post' （请求方式，用于设置表单的提交方式）

                name = '表单名称'（用于指定表单的名称，以便于区分同一个页面的不同的表单域）

            注：表单的区域，所有的表单元素，都要写在表单域里；

2. 表单元素：

            1、<input type="">

                属性：

                    type=""  设置表单类型的属性，根据属性值不同，显示的表单类型也不同；

                        属性值：

                            text  单行文本框

                            password  密码框

                            submit  提交按钮

                            reset   重置按钮

                            button  普通按钮

                            radio    单选按钮，单选框；要配合name属性使用，属于同一组的单选按钮里，只能有一个是选中状态；

                            checkbox 复选框

                            file   上传文件框

                            hidden 隐藏表单，一般用来传递参数,而又不想显示在客户端；

                             

                    value="" 设置表单元素的默认值，根据表单类型的不同，显示的形式也不同;

                    name=""  给标签起name名字，属性值（名字）是自定义；

      2、按钮

               <button></button>

                    默认是提交效果：

                       <button>提交</button> 

                    通过type属性显示按钮类型：

                       <button type="submit">提交</button> 

                       <button type="reset">重置</button>

                       <button type="button">普通</button> 

 3、多行文本框

               <textarea></textarea>

                属性：

                    cols="50"  设置宽度，以字符为单位

                    rows="5"  设置高度，以字符为单位

                注：多行文本框里的空格和回车，会被浏览器远洋解析；

                补充：pre和多行文本框具有相同的特性，就是标签里的空格和回车，会被浏览器远洋解析；文字字号小；

                取消多行文本框的可拖拽效果的属性：resize:none;（css属性）

 4、下拉菜单

               <select>

                    <option>显示的内容</option>

                    ...

               </select>

               <optgroup label="组标题"></optgroup> 给下拉菜单分组的标签

               设置默认选项属性的三种写法：

                    selected="selected"

                    selected=""

                    selected

5.表单中的html属性：

            type = '控件类型'

            name：属性标识表单域的名称；

            value：属性定义表单域的默认值，其他属性根据type的不同而有所变化。

            maxlength：控制最多输入的字符数，

            size：控制框的宽度（以字符为单位）(了解)

            checked="checked"   默认选中,一般单选按钮和复选框具有选中状态；

            disabled="disabled" 禁用 ，表单元素都可以使用；

            placeholder="提示信息" h5新增属性

 6.提示信息标签

 <label for=""></label>

                for=""  绑定表单元素（控件），把要绑定的表单元素的id值写在for属性里；

            如：

                <label for="box"></label>

                <input type="checkbox" id="box">

            注：label 是一个行内元素，自左向右排列显示；

7.表单字段集标签：

            <fieldset></fieldset>

            作用：就是给表单元素划分区域，就是给表单元素分组用的；

            注：

                1、可以嵌套其他元素包括自己本身；

                2、默认自带边框样式

        字段集标题标签：

            <legend></legend>

            注：给字段集添加标题用的，必须写在fieldset里面的第一个子元素的位置上；

     -->