form表单

一、form表单常用属性action和method

action="#":规定当提交表单时向何处发送表单数据，其引号里填地址。

method:规定用于发送 form-data 的 HTTP 方法  常用get、post！

get请求不安全：将name属性的信息暴露在地址栏上，地址栏默认大小64kb 

post请求安全：不会将信息暴露在地址栏上

有以下8种请求方式：

    1   GET 请求指定的页面信息，并返回实体主体。

    2   HEAD    类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头

    3   POST    向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。

    4   PUT 从客户端向服务器传送的数据取代指定的文档的内容。

    5   DELETE  请求服务器删除指定的页面。

    6   CONNECT HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。

    7   OPTIONS 允许客户端查看服务器的性能。

    8   TRACE   回显服务器收到的请求，主要用于测试或诊断。

    9   PATCH   是对 PUT 方法的补充，用来对已知资源进行局部更新 。

二、input和textarea的属性及使用

input的属性：

    1.name————————元素的名称

    2.value————————元素的值

    3.id——————————元素的唯一标识符（可以与lable标签在单复选框中使用，增加用户体验用for搭配使用）

    4.maxlength——————元素接收字符上限，其值是整数

    5.checked———————默认选中，在单选框和复选框中使用

    6.readonly———————输入字段只读 不能做任何修改

    7.mutiple————————规定输入字段可选择多个值

    8.placeholder——————提供可描述输入字段预期值的提示信息，该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

    9.disabled———————禁用input元素 被禁用的input是不可被使用的 也不可以被点击

    10.required———————提交信息的时候 你的input是空的 会提示  内容不能为空！

    11.autofocus——————页面打开时会自动获取光标

    12.type————————规定 input 元素的类型。

input的类型有：

     text（定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符）

     password（定义密码字段，该字段中的字符一实心原点可视）

     radio（定义单选按钮，要使其能单选，其name属性值要相同，可用lable标签搭配使用增加用户体验）

     checkbox（定义复选框，要使其能单选，其name属性值要相同，可用lable标签搭配使用增加用户体验）

     select（定义选择框，和option搭配使用，默认选中是selected）

     buttom（定义可以点击的普通按钮，常结合js使用）

     reset（定义重置按钮，要在form表单才有用，若点击无效，很可能不在form表单内）

     submit（定义提交按钮，要在form表单才有用，若点击无效，很可能不在form表单内）

     file（定义输入字段和“浏览”按钮，供文件上传）

     hidden（定义隐藏的输入字段）

     image（定义图像形式的提交按钮）

textarea常用属性：

   1.cols————————规定文本内一行字符数

    2.rows————————规定文本内的可见行数

    3.maxlength——————规定文本域的最大字符数

    4.readonly———————输入字段只读 不能做任何修改

    5.placeholder——————提供可描述输入字段预期值的提示信息，该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

    6.disabled———————禁用input元素 被禁用的input是不可被使用的 也不可以被点击

    7.required———————提交信息的时候 你的input是空的 会提示  内容不能为空！

    8.autofocus——————页面打开时会自动获取光标

   

<form action="#" method="POST">

    <p>用户名：<input type="text"></p>

    <p>密码：<input type="password"></p>
                
    <p> 单选按钮:
        <input type="radio" value="男" name="gender" id="nan"><label for="nan">男</label>
         <input type="radio" value="女" name="gender" checked="checked" id="nv"><label for="nv">女</label>
    </p>

    <p>复选按钮：<input type="checkbox"></p>

    <p>普通按钮；<input type="buttom"></p>
              
    <p>图像按钮：使用某张图片作为按钮<input type="image" src="#"></p>
                  
    <p>隐藏域：<input type="hidden"></p>
             
    <p>文件：<input type="file"></p>
               
    <p>选择框：<select name="" id="">
               option value="北京">北京</option>
               <option value="上海">上海</option>
               <option value="重庆" selected>重庆</option>
               </select>
    </p>

    文本域：<textarea name="s" id="s" cols="35" rows="10"></textarea>
                      
    <p>邮件：<input type="email" name="email" placeholder="请输入邮箱"></p>

    <p>数字：<input type="namber" max="10" min="1"></p>

    <p>颜色:<input type="color"></P>

    <p>日期（年月日）：<input type="date"></p>

    <p>获取时间（年月日时分）<input type="datetime-local"></p>

    <p>获取时间（时分）：<input type="time"></p>

    <p>范围：<input type="range"></p>

    <p> 提交：<input type="submit" value="提交"></p>

    <p>重置按钮：<input type="reset"></p>

</form>