form表单

form、input

form 块级元素 block element
    method='get|post' 表单提交时的接口请求方式
    action='url' 表单提交的接口地址

input 内联块元素 inline-block element
表单的两个要素：数据的名称（name）+数据的值(value)
    type：表单类型
    name：数据名称
    value：数据的值
    maxlength：输入数据最大字符长度限制(超出之后无法输入)
    id：输入框的唯一标识id
        【注】：id和name可以相同，id是给lable用的，name是给submit提交数据用的
    readonly='readonly' 表示只读，不可对数据值进行修改

表单校验 
    表单校验既要在前端校验，也要在后端校验
    密码提交需要对密码进行加密，一般使用md5加密
    md5是一种信息摘要算法，是一种不可逆加密算法，只要md5加密就不可再解密，不需要密钥

text、password、submit类型

text：文本输入框
password：密码输入框
submit：提交按钮  value 属性值是按钮显示的文字

    <form method="get" action="">
        <p>
            用户名：<input type="text" name="username" id="" value="" maxlength="5">
        </p>
        <p>
            密码：<input type="password" name="password" id="" value="">
        </p>
        <p>
            <input type="submit" name="" id="" value="登录">
        </p>
    </form>

lable标签

label 标签 内联元素 inline element
    for属性：当lable的for属性与input的id相同时，点击lable可以使相应的input获取焦点

        <p>
            <label for="username">用户名：</label>
            <input type="text" name="username" id="username">
        </p>

readonly、readonly属性

readonly 只读（只可以读取，不可以修改）
disabled 禁用（既不可读取，也不可以修改）
readonly 的数据可以被submit提交
disabled 的数据不可以被submit提交

    <form method="get" action="" >
        <p>
            姓名：<input type="text" name="username" id="">
        </p>
        <p>
            国籍：<input type="text" name="country" id="" value="中国" readonly="readonly">
        </p>
        <p>
            国籍：<input type="text" name="country1" id="" value="中国" disabled="disabled">
        </p>
        <p>
            <input type="submit" name="" id="" value="提交">
        </p>
    </form>

radio类型

type='radio' 单选按钮
    name属性值 多个选项的name值必须相同
    value属性 表示选项的值
    checked='checked' 表示默认选中的选项
    使用lable标签的for属性，可以在点击lable标签时选中对应的选项

    <form action="" method="get">
        <p>
            <input type="radio" name="gender" id="male" value="male" checked="checked">
            <label for="male">男士</label>
            <input type="radio" name="gender" id="female" value="female">
            <label for="female">女士</label>
        </p>
        <p>
            <input type="submit" name="" id="" value="提交">
        </p>
    </form>

checkbox类型

多选 type='checkbox'
    name属性 多个选项必须相同
    value属性 表示每个选项的值
    使用lable标签的for属性，可以在点击lable标签时选中对应的选项

    <form action="" method="get">
        <h3>你喜欢的编程语言</h3>
        <p>
            <input type="checkbox" name="myFavoriteLan" id="js" value="js">
            <label for="js">js</label>
        </p>
        <p>
            <input type="checkbox" name="myFavoriteLan" id="python" value="python">
            <label for="python">python</label>
        </p>
        <p>
            <input type="checkbox" name="myFavoriteLan" id="java" value="java">
            <label for="java">java</label>
        </p>
        <p>
            <input type="checkbox" name="myFavoriteLan" id="php" value="php">
            <label for="php">php</label>
        </p>
        <p>
            <input type="submit" name="" id="">
        </p>
    </form>

select标签

下拉选择框
    如果不写value属性，选择器会把option标签内的文本当作value值
    注意：由于请选择的value是‘’，在提交时需要判断value是否为‘’

     <form action="" method="get">
        <select name="lang" id="">
            <option value="">请选择</option>
            <option>js</option>
            <option>java</option>
            <option value="php">php</option>
            <option value="python">python</option>
        </select>
        <input type="submit" name="" id="">
     </form>

textarea标签

type='textarea' 多行文本输入框
    cols='30' 文本框的宽度
        30表示可以容纳30个英文字符的宽度
        如果font-size='16'，那么文本框的宽度为 8px * 30 + 17px (17px是滚动条的宽度)
    rows="10" 可见行数
    textarea标签中间不要有空格和换行，因为标签内部的内容会作为value值在页面上显示

      <form action="" method="get">
        <textarea name="" id="" cols="30" rows="10">123123</textarea>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <p>
            <input type="submit" name="" id="">
        </p>
      </form>

placeholder属性

placeholder属性 用于在输入框内显示提示文本
    建议使用js模拟placeholder（封装一个placeholder插件，使用的时候引用插件即可）
    各个浏览器对placeholder的样式不统一，如果对样式要求较高的话建议自定义placeholder
    有的时候placeholder是动态变化的，此时需要js模拟placeholder

       <form action="" method="get">
        <textarea name="" id="" cols="30" rows="10" placeholder="请输入文本"></textarea>
        <p>
            用户名：<input type="text" name="" id="" placeholder="请输入用户名">
        </p>
       </form>

fieldset、legend标签

fieldset 封装表单、给表单分组
    legend 标题
    fieldset和legend 都是块级元素

        <form action="" method="get">
            <fieldset>
                <legend>用户登录</legend>
                <p>
                    <label for="username">用户名：</label>
                    <input type="text" name="username" placeholder="请输入用户名" id="username">
                </p>
                <p>
                    <label for="password">密码：</label>
                    <input type="text" name="password" placeholder="请输入密码" id="password">
                </p>
            </fieldset>
            <fieldset>
                <legend>个人信息</legend>
                <p>
                    <label for="cardId">身份证号：</label>
                    <input type="text" name="cardId" placeholder="请输入身份证号" id="cardId">
                </p>
                <p>
                    <label for="school">毕业学校：</label>
                    <input type="text" name="school" placeholder="请输入毕业学校" id="school">
                </p>
            </fieldset>
            <input type="submit" name="" id="">
        </form>