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

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

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

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