CSS学习笔记(十) 界面组件之表单

andot 发布于2019-08-28 18:05 / 3284人阅读

摘要：概述表单与其他页面元素的作用不同。属性用于指定服务器上用来处理表单数据的文件的。所谓控件，是对表单中用来收集数据的各种表单组件的通称，包括文本框复选框单选按钮等输入类型。

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;
        } 
    }
});