html-表單標籤

栗子殼發表於2018-10-31
HTML

　　表單標籤
　　　　* 可以提交資料到**網站上的伺服器，這個過程可以使用表單標籤實現
　　　　* <form></form>：定義一個表單的範圍
　　　　- 屬性
　　　　　　** action：提交到地址，預設提交到當前頁面
　　　　　　** method: 表單提交方式
　　　　- 常用的有兩種：get和post，預設是get請求

　　　　** get和post區別
　　　　1、get請求位址列會攜帶提交的資料，post不會攜帶（請求體裡面，後面http協議的時候再詳解）
　　　　2、get請求安全級別較低，post較高
　　　　3、get請求資料有大小的限制，post沒有限制。

　　　　** enctype：一般請求不需要用到這個屬性，做檔案上傳時候需要設定這個屬性。

　　　　** 輸入項：可以輸入內容或者選擇內容的部分
　　　　　　- 大部分的輸入項 使用 <input type=”輸入項的型別”/>

　　　　　　　　*********** 在輸入項裡面要有一個name屬性，為了用資料庫儲存資料 **********

　　　　　　*** 普通輸入項： <input type=”text”/>

　　　　　　*** 密碼輸入項： <input type=”password”/>

　　　　　　*** 單選輸入項： <input type=”radio”/>
　　　　　　　　- 在裡面需要屬性 name
　　　　　　　　- name的屬性值必須要相同
　　　　　　　　- 必須有一個value值

　　　　　　　　**** 實現預設選中的屬性
　　　　　　　　　　– checked=”checked”

　　　　　　*** 複選輸入項： <input type=”checkbox”/>
　　　　　　　　- 在裡面需要屬性 name
　　　　　　　　- name的屬性值必須要相同
　　　　　　　　- 必須有一個value值

　　　　　　　　**** 實現預設選中的屬性
　　　　　　　　　　– checked=”checked”

　　　　　　*** 檔案輸入項：（上傳時候用到）
　　　　　　　　<input type=”file”/>

　　　　　　*** 隱藏項：
　　　　　　　　<input type=”hidden”/>

　　　　　　*** 下拉輸入項（不是在input標籤裡面）
　　　　　　　　<select name=”birthday”>
　　　　　　　　　　<option value=”0″>請選擇</option>
　　　　　　　　　　<option value=”1995″>1995</option>
　　　　　　　　　　<option value=”1996″>1996</option>
　　　　　　　　　　<option value=”1997″>1997</option>
　　　　　　　　</select>
　　　　　　　　**** 預設選中
　　　　　　　　　　selected=”selected”

　　　　　　*** 文字域：
　　　　　　　　<textarea cols=”10″ row=”5″></textarea>

　　　　*** 提交按鈕：
　　　　　　　<input type=”sumbit”/>
　　　　　　　<input type=”sumbit” value=”註冊”/>

　　　　　　　當在輸入項裡面寫了name屬性之後
　　　　　　　　　file:///D:/Java/JavaWeb/day01/09-表單標籤1.html?phone=15872586170&pwd=wyj0320.cn&sex=male&love=y&love=p&f=&birthday=1997&txt=love&hid=

　　　　　　　　　** ?輸入項name的值-輸入的值&
　　　　　　　　　** 引數類似於Map集合裡面的key-value

　　　　　*** 使用圖片提交
　　　　　　　<input type=”image” src=”圖片路徑”/>

　　　　　*** 重置按鈕：回到輸入項的初的狀態
　　　　　　　<input type=”reset”/>

　　　　　*** 普通按鈕（js裡面用到）
　　　　　　　<input type=”button” value=”普通按鈕”/>

　　完整程式碼：

<html>
    <head>
        <title>World</title>
    </head>
    <body>
    <!-- 測試表單 -->
        <form action="01-hello.html" method="post">
            手機號碼：<input type="text" name="phone"/><br/>
            建立密碼：<input type="password" name="pwd"/><br/>
            性別：<input type="radio" name="sex" value="female"/>女 <input type="radio" name="sex" value="male" checked="checked"/>男<br/>
            愛好：<input type="checkbox" name="love" value="y"/>羽毛球 <input type="checkbox" name="love" value="p" checked="checked"/>乒乓球 <input type="checkbox" name="love" value="z"/>足球
            <br/>
            檔案：<input type="file" name="f"/><br/>
            生日：<select name="birthday">
                    <option value="0">請選擇</option>
                    <option value="1995">1995</option>
                    <option value="1996">1996</option>
                    <option value="1997"  selected="selected">1997</option>

                  </select>
                  <br/>
            自我描述：<textarea cols="10" rows="5" name="txt"></textarea>
            <br/>
            隱藏項：<input type="hidden" name="hid"/> <br/>
            <input type="submit" value="註冊"/>
            <br/>
            <!--<input type="image" src="images/a.jpg"> -->
            <input  type="reset"/>
            <br/>
            <input type="button" value="普通按鈕"/>
        </form>
    </body>
</html>

 

相關文章