1. 程式人生 > >html表單整理,例項

html表單整理,例項

    首先通過一個例項來表明表單的一些基本的使用,然後詳細講解表單裡面的屬性,最後再做出總結。

 

接下來解析上面的例子 

1、表單的作用:用來蒐集不同型別的使用者輸入

2、<form action="#" method="get"> </form> : form標籤表示表單。action="#":設定資料的提交地址,就是提交給

哪一個頁面。method="get":設定資料的提交方式,有get和post兩種,這邊講一下get和post的區別

get請求:將提交的資料拼接在URL位址列後面,不安全,但是速度快

post請求:將資料封裝在請求頭中,請求速度慢

這邊post請求的一個常見問題,在於,HBuilder不支援post請求,如下圖所示

下圖是另一個錯誤,原因是action路徑出錯啦,導致提交不出去,所以只需要把action的路徑改一下

3、輸入控制元件input:<input  type="text" name="user" placeholder="請輸入名字"
                             autofocus="autofocus" required="required" />

     注: 型別為text,即為文字。取得名字為name:方便傳值,不然傳不了值placeholder

="請輸入名字":

表示訊息提示文字。  autofocus="autofocus":表示自動聚焦,直接有輸入的提示。 required="required":

表示此選項為必須填的東西,不能省略。

      性別: <input type="radio" name="sex"  />男
                  <input type="radio" name="sex" />女

      注:型別為radio:實現按鈕的分組,但是,要有相同的名字才能實現二選一功能


            教育程度:<input type="checkbox"

 name="college" />專科
            <input type="checkbox" name="college" />本科
            <input type="checkbox" name="college" />碩士
            <input type="checkbox"  name="college" />博士

      注:型別為checkbox:表示複選框

            <input type="file" />

      注:型別為file,表示上傳檔案

           <input type="submit" disabled="disabled" / >
              注:型別為submit:預設為提交按鈕,如果要改變值的話,就改變value的值


            <input type="reset"  />    
           注:型別為reset


            <input type="button" value="普通按鈕" />
            同上
            
            <!--圖片按鈕相當於submit,會自動提交-->
            <input type="image" src="http://p99.pstatp.com/large/pgc-image/R9Ku0dFEuJI90N" 
                width="50px" height="20px" />    
      

4、其他

           1、<textarea rows="15px" cols="20px" name="beizhu" >    
            </textarea>   
注:文字框的書寫 cols表示行,rows表示列,記住與合併的區別

           2、國籍:&nbsp;&nbsp;<select name="guoji">
                <option>中國</option>
                <option selected="selected">美國</option>
                <option>英國</option>
            </select>  注:下拉標籤為select,下拉選項為option,預設初始值為selected="selected"

           3、&nbsp;&nbsp;<input type="checkbox" name="check"   id="chk" />
            <label for="chk" >同意註冊協議</label>

                 注:實現的功能為點選文字,就會在前面自動打勾或者取消打勾,

                 其中,label中的for屬性值與它配合的input元素的id屬性值必須一樣

    表單的一些基本內容大概就這麼多,還希望大家給出點評,以後幾乎會每天更新一些前端的知識總結,還希望各位

大佬,或者是興趣相投的同學可以一起分享技術,讓我們共同進步吧。