表單

<!--

action:指定表單數據提交的地址

method:表單數據提交的方法

 

爲了往服務端提交數據時,提交的數據清晰易懂,方便處理:

1.普通輸入框:需要添加name屬性,來保證鍵值對的完整

2.非輸入框:需要添加name(用來分組),value(用來生成鍵值對的)屬性,

          來保證鍵值對的完整,name還有分組的作用,

         單選框:相同name的是一組,

         單選框中同一組內的選項有互斥的效果

         複選框:也需要name屬性來表明當前的多項式一組。

 

通過get請求往服務端提交數據的時候,提交的數據會追加在url地址的後面

以?進行分隔,多個數據之間使用&分隔。

get請求的缺點:暴露敏感信息,傳輸數據有限

get請求的優點:傳輸速度快

 

post請求:傳輸的數據放在請求體重,而不是暴露在url地址的後面

優點:可以隱藏敏感信息,傳輸的數據多少沒有限制

缺點:傳輸速度慢(相對的)

 

按鈕四個:

type:reset         重置按鈕

type:submit        提交按鈕

type:image         具有提交的功能

<button></button>  具有提交的功能

 

tabindex:1爲開始索引

------------------------------------------------------------------->

<!--text···············單行文本輸入>

<!--radio··············單選-->

<!--checkbox···········多選-->

<!--下拉框-->

    籍貫:<select name="home" >

    <option value="sd">山東</option>

    <option value="gx">廣西</option>

    <option value="sh">上海</option>

    <option value="zj">浙江</option>

</select>

<!--文本框-->

    意見:<textarea name="suggest" cols="21" rows="10"></textarea>

------------------------------------------------------------------->

<!--表格邊框(一個表格可以分多個區域)

    <fieldset>

        <!--表格標題-->

        <legend>

            個人信息

        </legend>

------------------------------------------------------------------->

<!--<input type="image" src="../../img/f3_Android1.png">-->

--------------------------------------------------------------------

form和table的結合

<form action="">

    <table>

        <tr>

            <td>

                登錄名:

            </td>

            <td>

                <input type="text">(可包含)

            </td>

            <td>

                <b>閱讀貴美服務協議</b>

            </td>

        </tr>

</table>

</form>

<!--

在html5中,表單元素可以放在form表單外,並通過form屬性和表單進行關聯,

通過關聯,form表單之外的表單元素也可以把數據提交。

-------------------------------------------------------------------->

<form action="">

    <!--H5提供的表單類型,具備數據驗證的功能,但是功能不嚴謹

    後期會用js中的正則表達式處理---------------------------------->

    郵箱:<input type="email">

    網址:<input type="url">

    日期:<input type="date">

    時間:<input type="time">

    月份:<input type="month">

    周:<input type="week">

    數字:<input type="number">

    滑動條:<input type="range">

    選擇顏色:<input type="color">

    <input type="submit">

</form>

<!—

HTML5表單新屬性

autocomplete:輸入框內容自動補全

autofocus:自動獲取焦點

required:必填

placeholder:提示信息

readonly:只讀

multiple:下拉框的多選項

selected:下拉框的默認選項  單選框和複選框通過check屬性實現默認選中

------------------------------------------------------------------------->

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章