HTML form 表單

時間 2019-11-29

標籤 html form 表單欄目 HTML 简体版

原文原文鏈接

HTML 表單用於蒐集不一樣類型的用戶輸入。html

<form> 元素定義 HTML 表單：jquery

類型	描述
text	定義常規文本輸入。
radio	定義單選按鈕輸入（選擇多個選擇之一）
submit	定義提交按鈕（提交表單）
password	密碼
select	下拉列表
option	定義待選擇的選項
textarea	定義多行輸入字段
button	定義可點擊的按鈕
datalist	爲 <input> 元素規定預約義選項列表
fieldset	組合表單中的相關數據
legend	爲 <fieldset> 元素定義標題
checkbox	統計選中複選框的個數
reset	重置表單
hidden	定義隱藏字段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Order Form</title>
</head>
<body>
    <h1>Order Form</h1>
    <form method='post'>
    <table>
        <tr>
            <td>Name:</td><td><input  name='name' /></td>
        </tr>
        <tr>
            <td>Address:</td>
            <!--文本區域  會將文字發送給服務器,如若沒有任何內容,則會發送空字符""給服務器 -->
            <td><textarea name="address" id="" cols="40" rows="5"></textarea></td>
        </tr>
        <tr>
            <td>Country:</td>
            <!--  下拉框select 若是被選擇,會將option選項的文字發送給服務器,不會向服務器返回任何值,  getParameter()爲null -->
            <td><select name='country'>
            <option>Canada</option>
            <option>United States</option>
            </select></td>
        </tr>
        <tr>
            <td>Delivery Method:</td>
            <!--  radio 若是沒有選擇,不會向服務器返回任何值,  getParameter()爲null-->
            <td><input type="radio" name="delivery" id="" value="First Class" />First Class
            <input type="radio" name="delivery" value="Second" />Second Class
            </td>
        </tr>
        <tr>
            <td>Shipping Instructions:</td>
            <!--  多個區域不輸入內容,默認發送個<br> -->
            <td><textarea name="instruction" id="" cols="40" rows="5"></textarea></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><textarea name="instruction" id="" cols="40" rows="5"></textarea></td>
        </tr>
        <tr>
            <td>P    lease send me the latest product catalog:</td>
            <!--  單選框checkbox 將被選中按鈕的值發送到服務器,若是沒有選擇任何按鈕,將沒有任何內容被髮送到服務器
              getParameter()爲null-->
            <td><input type="checkbox" name="catalog" /></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><input type="reset" /> <input type="submit" /></td>
        </tr>
    </table>
    </form>
</body>
</html>

下面是 <form> 屬性的列表：ajax

屬性	描述
accept-charset	規定在被提交表單中使用的字符集（默認：頁面字符集）。
action	規定向何處提交表單的地址（URL）（提交頁面）。
autocomplete	規定瀏覽器應該自動完成表單（默認：開啓）。
enctype	規定被提交數據的編碼（默認：url-encoded）。
method	規定在提交表單時所用的 HTTP 方法（默認：GET）。
name	規定識別表單的名稱（對於 DOM 使用：document.forms.name）。
novalidate	規定瀏覽器不驗證表單。
target	規定 action 屬性中地址的目標（默認：_self）。
checked	規定在頁面加載時應該被預先選定的 input 元素

form表單提交方式

無刷新頁面提交表單

表單可實現無刷新頁面提交，無需頁面跳轉，以下，經過一個隱藏的iframe實現，form表單的target設置爲iframe的name名稱，
form提交目標位當前頁面iframe則不會刷新頁面json

<form action="/url.do" method="post" target="targetIfr">
<input type="text" name="name"/>
</form>   
<iframe name="targetIfr" style="display:none"></iframe>

經過type=submit提交

通常表單提交經過type=submit實現，input type="submit",瀏覽器顯示爲button按鈕，經過點擊這個按鈕提交表單數據跳轉到/url.do瀏覽器

<form action="/url.do" method="post">
   <input type="text" name="name"/>
   <input type="submit" value="提交">
</form>

js提交form表單

js事件觸發表單提交，經過button、連接等觸發事件，js調用submit()方法提交表單數據，jquery經過submit()方法服務器

<form id="form" action="/url.do" method="post">
   <input type="text" name="name"/>
</form>

js: document.getElementById("form").submit();
jquery: $("#form").submit();app

ajax異步提交表單數據

採用ajax異步方式，經過js獲取form中全部input、select等組件的值，將這些值組成Json格式，經過異步的方式與服務器端進行交互，
通常將表單數據傳送給服務器端，服務器端處理數據並返回結果信息等異步

<form id="form"  method="post">
   <input type="text" name="name" id="name"/>
</form>
  var params = {"name", $("#name").val()}
 $.ajax({
      type: "POST",
      url: "/url.do",
      data: params,
      dataType : "json",
      success: function(respMsg){
      }
   });

頁面無跳轉

若是經過form表單提交請求服務端去下載文件，這時當前頁面不會發生跳轉，服務端返回void，經過response 去寫文件數據，
頁面會顯示下載文件。post

<form action="/url.do" method="post">
   <input type="text" name="name"/>
   <input type="submit" value="提交">
</form>

@RequestMapping(value = "/url")
    public void exportFile(HttpServletRequest req, HttpServletResponse response, String rptId)
            throws Exception {
        OutputStream out = null;
        try {
            String rptName = "file";
            String fileName = new String((rptName + excelAble.getFileSuffix()).getBytes("GBK"),
                    "8859_1");
            response.reset();
            response.setContentType("application/octec-stream");
            response.setHeader("Content-disposition", "attachment; filename=" + fileName);
            out = response.getOutputStream();
            excelAble.exportFile(out);
        } catch (Exception e) {
            logger.error(e);
        } finally {
            if (out != null) {
                out.close();
            }
        }
    }

form表單上傳文件

使用form表單進行上傳文件須要爲form添加enctype="multipart/form-data" 屬性，除此以外還須要將表單的提交方法改爲post,
以下 method="post", input type的類型須要設置爲file <form action="/url.do" enctype="multipart/form-data" method="post">編碼

     <input type="file" name="name"/>
     <input type="submit" value="提交">
   </form>

form 下列菜單select

<select name='titleFontSize' > 
<option value=large</option>
<option >x-large</option>
<option >xx-large</option>
</select>

form 多選菜單 select multiple

<td>Title Style & Weight: </td>
<td><select name='titleStyleAndWetght'multiple>// multiple='multiple' size='3'
<option value="">italic</option> //當value指定了值時(""也算值),瀏覽器向服務器發送value的值,不然發送選選項italic或bold的值
<option value="">bold</option>
</select>

form 提交按鈕

<input type="submit" value="set" />

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。