CSS學習筆記(十) 界面組件之表單

andot 發布于2019-08-28 18:05 / 3258人閱讀

摘要：概述表單與其他頁面元素的作用不同。屬性用于指定服務器上用來處理表單數據的文件的。所謂控件，是對表單中用來收集數據的各種表單組件的通稱，包括文本框復選框單選按鈕等輸入類型。

1.概述

表單與其他頁面元素的作用不同。其他元素是把服務器發過來的內容顯示給用戶，而表單則是 把用戶的信息發送給服務器。

form 元素有兩個必要的屬性：action 和 method。
action 屬性用于指定服務器上用來處理表單數據的文件的URL。
method (值為 post 或 get)用于指定怎么把數據發送到服務器。

所謂控件，是對表單中用來收集數據的各種表單組件的通稱，包括文本框、復選框、單選按鈕等輸入類型。

表單中數據的發送形式：名 = 值，其中，name 就是控件 name 屬性中設定的名字。

2. 表單控件 2.1 文本域

2.2 密碼域

2.3 單選按鈕

 Male
 Female

2.4 復選框

2.5 按鈕

2.6 重置按鈕

2.7 提交按鈕

2.8 隱藏域

2.9 上傳域

2.10 圖片按鈕

2.11 下拉列表

屬性	可選值	說明
disabled	disabled	規定禁用該下拉列表
multiple	multiple	規定可選擇多個選項
name	name	規定下拉列表的名稱
size	number	規定下拉列表中可見選項的數目

2.11 label

label 元素不會向用戶呈現任何特俗效果。不過，它為鼠標用戶改進了可用性。如果你在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動轉到和標簽相關的表單控件上。

男人

女人

或者寫成這樣：


  Male
  
  

  Female

2.12 disable與readonly

禁用和只讀屬性。readonly 只針對 input(text / password) 和 textarea 有效，而 disabled 對于所有的表單元素都有效，包括 select, radio, checkbox, button 等。但是表單元素在使用了 disabled 后，當我們將表單以 POST 或 GET 的方式提交的話，這個元素的值不會被傳遞出去，而 readonly 會將該值傳遞出去。

2.13 textarea

這是個文本域。

2.14 fieldset

定義域。fieldset 用于給表單元素分組，legend 用于設置分組標題。


    你的信息？
    身高: 
    體重:

HTML5 新增多個新的表單輸入類型，請參考本文下面的鏈接。

3.表單屬性

HTML5 新增多個新的表單屬性，請參考本文下面的鏈接。

4.表單驗證

$(document).ready(function(){
    $("#btnSubmit").click(function(){
        // 驗證非空
        if($("#text_1").val()==""){
            alert("不能為空！");
            return false;    // 阻止提交
        }
        // 驗證是否數字
        else if(checkOnlyNum($("#text_2").val())==false){
            return false;    
        }
    });

    // 正則方法
    function checkOnlyNum(s){
        $oOnlyNum = /^(0|[1-9][0-9]*)$/;    // 正則表達式
        if(!$oOnlyNum.test(s)){
            alert("只能為數字！");
            return false;
        }else{
            return true;
        } 
    }
});