前端學習日記 (二)-有解無憂

form表單

使用時機當前后端有資料互動的時候用form表單

form表單提交資料的幾個注意事項:

1.所有獲取用戶輸入的標簽都必須放在form表單里面

2.action控制著往哪提交

3.input\select\textarea都需要有name的屬性,nane屬性類似于字典中的鍵能方便在后端資料的找尋

4.提交按鈕<input type="submit">

用form表單的陳述句制作一個簡單的注冊網頁:

<!DOCTYPE html>
<html>      　　　　
    <head>
        <meta charset="UTF-8">
        <title>網頁表單示例</title>
    </head>
    <body>
        <!--注冊示例-->
        <form action="" method="post" enctype="multipart/form-data">    <!--action后面一般寫一個網址用于把資料反饋給后端-->
            <p>用戶名:
                <input name="username" type="text">
            </p>
            <p>密碼:
                <input name="password" type="password">
            </p>

            <p>性別:
                <input name="gender" type="radio" value="1">男     <!--這里的性別作為一個提示性文字-->
                <input name="gender" type="radio" value="0">女
                <input checked name="gender" type="radio" value="2">保密      <!--checked表示默認-->
            </p>

            <p>愛好:
            <input checked name="hobby" type="checkbox" value="basketball">籃球
            <input name="hobby" type="checkbox" value="shotting">射擊
            <input name="hobby" type="checkbox" value="parachute">跳傘
            <input name="hobby" type="checkbox" value="skiing">溜冰
            </p>

            <p>
                <select name="region" id="s1">
                    <option value="中國">中國</option>
                    <option value="日本">日本</option>
                    <option value="美國">美國</option>
                </select>

                <select name="innerRegion" id="s2">
                    <optgroup label="中國">
                        <option value="fj">福建</option>
                        <option value="sx">山西</option>
                        <option value="gd">廣東</option>
                        <option value="hn">河南</option>
                        <option value="sh">上海</option>
                    </optgroup>

                    <optgroup label="日本">
                        <option value="bhd">北海道</option>
                        <option value="snc">神奈川</option>
                        <option value="dj">東京</option>
                        <option value="cs">沖繩</option>
                        <option value="db">大阪</option>
                    </optgroup>

                    <optgroup label="美國">
                        <option value="fc">費城</option>
                        <option value="ny">紐約</option>
                        <option value="zjg">芝加哥</option>
                        <option value="lsj">洛杉磯</option>
                        <option value="xsd">休斯頓</option>
                    </optgroup>
                </select>
            </p>

            <p>
                生日:<input name="birthday" type="date">
            </p>

            <p>
                <textarea name="myInfo" id="t1" cols="30" rows="10"></textarea>
            </p>

            <p><!--不可用欄目-->
                <input name="disableText" type="text" placeholder="Disable text!" disabled>
            </p>

            <p><!--上傳頭像-->
                頭像:
                <input name="get_file" type="file">
            </p>

            <p>郵箱地址:<!--郵箱-->
                <input name="email" type="email" placeholder="[email protected]">       <!--placeorder中的值不會去顯示-->
            </p>

            <p><!--隱藏不顯示-->
                <input type="hidden" value="hidden">
            </p>

            <p>只讀文本:
                <input name="readOnlyText" type="text" readonly value="這是只讀文本,無法修改!">
            </p>

            <p><!--制作按鈕-->
                <input type="button" value="點擊按鈕">
            </p>

            <p><!--提交資料-->
                <input type="submit" value="提交資料!">
            </p>

            <p><!--重置資料-->
                <input type="reset" value="點擊重置" >
            </p>
        </form>

    </body>
</html>

網頁效果:

歸納:

常用型別的功能有:text(文本)、password(密碼)、radio(單選框)、checkbox(多選框)、date(日期)、datatime(時間)、file(檔案)、button(按鈕,一般使用JS給它系結)、sumbit(提交)、textarea(大文本)、select(下拉選單)、option(具體的下拉選單)、optgroup(分組的下拉框)

表單屬性:

屬性	值	描述
accept	MIME_type	HTML5不支持,規定服務器接收到的檔案的型別，（檔案是通過檔案上傳提交的）
accept-charset	character_set	規定服務器可處理的表單資料字符集，
action	url	規定當提交表單時向何處發送表單資料
autocomplete	on/off	規定是否啟用表單的自動補全的功能,比如第二次輸入用戶名,HTML5會幫你自動填補資訊，
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	規定在向服務器發送表單資料之前如何對其進行編碼，(適用于 method="post" 的情況)
method	get/post	規定用于發送表單資料的 HTTP 方法，
name	text	規定表單的名稱，
novalidate	novalidate	如果使用該屬性，則提交表單時不進行驗證，
target	_blank/_self/_parent/_top	規定在何處打開 action URL，

select的一些補充

①multiple　可進行多選

<form action="" method="post" enctype="multipart/form-data">    
     <p>
           <select name="color" id="c" multiple>      　　　　 <!--表示可以進行多選-->
                <option value="yellow">黃色</option>
                <option value="blue">藍色</option>
                <option value="red">紅色</option>
                <option value="orange">橘色</option>
           </select>
      </p>
</form>

網頁效果:

②disabled 不可用

③selected　默認選中某一項

<form action="" method="post" enctype="multipart/form-data">
     <p>
          <select name="color" id="c" >
               <option value="yellow">黃色</option>
               <option value="blue">藍色</option>
               <option value="red">紅色</option>
               <option value="orange">橘色</option>
               <option value="null" selected>null</option>
          </select>
     </p>
</form>

網頁效果:

④value 定義提交的選項值

label的一些補充

label標簽就是input元素的一個定義,這樣寫會更加規范

<form action="" method="post" enctype="multipart/form-data">
      <p>
            <label for="l1">用戶名</label>
            <input id="l1" name="username" type="text" placeholder="請輸入用戶名!">
      </p>

      <p>
            <label for="l2">密碼</label>
            <input id="l2" name="password" type="text" placeholder="請輸入密碼!">
      </p>
</form>

通過點擊label標簽名也可以對radio去選中

<!DOCTYPE html>
<html>      　　　　
    <head>
        <meta charset="UTF-8">
        <title>網頁表單示例</title>
    </head>
    <body>
        <form action="" method="post" enctype="multipart/form-data">
             <p>性別1:
                <input name="gender" type="radio" value="1">男
                <input name="gender" type="radio" value="0">女
                <input checked name="gender" type="radio" value="2">保密
            </p>

            <p>性別2:
                <label for="s1">男</label>
                <input id="s1" name="gender" type="radio" value="1">
                <label for="s2">女</label>
                <input id="s2" name="gender" type="radio" value="0">
                <label for="s3">保密</label>
                <input id="s3" checked name="gender" type="radio" value="2">
            </p>
        </form>
    </body>
</html>

另外一種寫法(推薦):

<!DOCTYPE html>
<html>      　　　　
    <head>
        <meta charset="UTF-8">
        <title>網頁表單示例</title>
    </head>
    <body>
        <form action="" method="post" enctype="multipart/form-data">
            <p>
                <label for="">性別
                    <label>男
                        <input name="gender" type="radio" value="1">
                    </label>
                    <label>女
                        <input name="gender" type="radio" value="0">
                    </label>
                    <label>保密
                        <input checked name="gender" type="radio" value="2">
                    </label>
                </label>
            </p>
        </form>
    </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/31333.html

標籤：HTML5

上一篇：【Web前端開發】---前端培訓roadmap

下一篇：Vue – 專案報錯整理(2): IE報錯 - ‘SyntaxError：strict 模式下不允許一個屬性有多個定義‘ ,基于vue element-ui頁面跳轉坑的解決