CSS學(xué)習(xí)筆記(十) 界面組件之表單

andot 發(fā)布于2019-08-28 18:05 / 3364人閱讀

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

1.概述

表單與其他頁面元素的作用不同。其他元素是把服務(wù)器發(fā)過來的內(nèi)容顯示給用戶，而表單則是 把用戶的信息發(fā)送給服務(wù)器。

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

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

表單中數(shù)據(jù)的發(fā)送形式：名 = 值，其中，name 就是控件 name 屬性中設(shè)定的名字。

2. 表單控件 2.1 文本域

2.2 密碼域

2.3 單選按鈕

 Male
 Female

2.4 復(fù)選框

2.5 按鈕

2.6 重置按鈕

2.7 提交按鈕

2.8 隱藏域

2.9 上傳域

2.10 圖片按鈕

2.11 下拉列表

屬性	可選值	說明
disabled	disabled	規(guī)定禁用該下拉列表
multiple	multiple	規(guī)定可選擇多個(gè)選項(xiàng)
name	name	規(guī)定下拉列表的名稱
size	number	規(guī)定下拉列表中可見選項(xiàng)的數(shù)目

2.11 label

label 元素不會(huì)向用戶呈現(xiàn)任何特俗效果。不過，它為鼠標(biāo)用戶改進(jìn)了可用性。如果你在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。

男人

女人

或者寫成這樣：


  Male
  
  

  Female

2.12 disable與readonly

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

2.13 textarea

這是個(gè)文本域。

2.14 fieldset

定義域。fieldset 用于給表單元素分組，legend 用于設(shè)置分組標(biāo)題。


    你的信息？
    身高: 
    體重:

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

3.表單屬性

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

4.表單驗(yàn)證

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

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