欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端之 form 详解

程序员文章站 2022-06-28 11:57:14
认识表单在一个页面上可以有多个form表单,但是向web服务器提交表单的时候,一次只可以提交一个表单。要声明一个表单,只需要使用 form 标记来标明表单的开始和结束,若需要向服务器提交数据,则在form标签中需要设置action属性(用来设置提交表单的位置)、method属性(用来定义浏览器将表单中的信息提交给服务器端程序的处理方式)、target属性(用来指定服务器返回结果所显示的目标窗口或目标框架);但是,对于客户端脚本编程来说,并不需要这些属性来帮助提交表单信息,form标签存在的意义是在于...

认识表单

  1. 在一个页面上可以有多个form表单,但是向web服务器提交表单的时候,一次只可以提交一个表单。
  2. 要声明一个表单,只需要使用 form 标记来标明表单的开始和结束,若需要向服务器提交数据,则在form标签中需要设置action属性(用来设置提交表单的位置)、method属性(用来定义浏览器将表单中的信息提交给服务器端程序的处理方式)、target属性(用来指定服务器返回结果所显示的目标窗口或目标框架);但是,对于客户端脚本编程来说,并不需要这些属性来帮助提交表单信息,form标签存在的意义是在于方便在脚本中编程的时候进行引用。
  3. 表单的引用可以利用from标签的name属性或者也可以利用document的forms[]数组中调用到对应的数组。
  4. 可以利用form表单的elements[]数组来遍历除了<input type=image >元素之外的所有元素
  5. form表单的submit()方法用于将表单提交给服务,但我们点击submit按钮的时候,submit按钮会相应的调用onsubmit事件处理器从而调用Form对象的submit事件
  6. 如何在浏览器中使用页面中的信息,我们称之为“客户端脚本编程”,而如何把信息提交给Web服务,并将数据库保存在数据库中,我们通常称为“服务器端脚本编程”
  7. 在早期,所有可交互的HTML元素都应该放在HTML表单中,但是现在的定义是,需要提交到web服务器的数据,才必须要放在表单内,可是前一种理解的方式也不是完全错误的,因为一般可以交互的HTML元素,都是表单元素(在前期),即:浏览器需要处理的数据都是表单元素,因此需要将其放在HTML表单中。

认识表单元素

  1. 大部分的表单控件元素都是由<input>标记创建的,<input>标记具有一个type属性,该属性决定了<input>标记所创建的表单控件的类型。
  2. 所有的单控件对象都具有一个 nam e属性,JavaScript 脚本通过 name 属性的值来引用特定的表单控件元素,同时这也是表单提交到服务器时,每个表单控件元素的值 value 所对应的 key 值。
  3. 绝大部分对象都具有 value 属性,该属性返回当前表单控件的值。
  4. 所有的表单控件对象都具有一个 form 属性,该属性返回包含当前控件的 Form 对象。对于一个通用的表单数据检查程序来说,用这个属性来标明哪些控件属于哪个表单。
  5. 所有的表单元素对象都具有focus()和blur()方法,同时所有的表单元素对象还具有onfocus和onblur事件处理器。

表单元素的分类

  常见的表单控件有:

              1、Text Input Elements:<input type="text"> 、<input type="password">、<textarea></textarea>

    2、Tick Box Elements:<input type="checkbox"> 、<input type="radio">

    3、Select Elements:<select size=1><option></option></select>、<select size=5 multiple><option></option></select>(下拉大框、多选)

    4、Button:<input type="button">、<input type="submit">、<input type="reset">

表单form属性

属性 描述
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
action 规定向何处提交表单的地址(URL)(提交页面)。
autocomplete 规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。
method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标(默认:_self)。

input

<input type=""> 元素会根据不同的 type 属性,变化为多种形态。

type属性值 表现形式 对应代码
text 单行输入文本 <input type=text" />
password 密码输入框 <input type="password"  />
date 日期输入框 <input type="date" />
checkbox 复选框

我喜欢自行车:<input type="checkbox" name="Bike">
我喜欢汽车:<input type="checkbox" name="Car">

备注:name 可以不同

radio 单选框

男性:<input type="radio" checked="checked" name="Sex" value="male" />
女性:<input type="radio" name="Sex" value="female" />

备注:name 必须一样

submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置"  />
button 普通按钮 <input type="button" value="普通按钮"  />
hidden 隐藏输入框 <input type="hidden"  />
file 文本选择框 <input type="file" method='post' enctype='multipart/form-data'  />

属性说明

  • name:表单提交时的“键”,注意和id的区别
  • value:表单提交时对应项的值
    • type 是 "button", "reset", "submit"时,为按钮上显示的文本内容
    • type 是 "text","password","hidden"时,为输入框的初始值
    • type 是 "checkbox", "radio", "file",为输入相关联的值
  • checked:radio和checkbox默认被选中的项
  • readonly:text和password设置只读
  • disabled:所有input均适用

select标签

<form action="" method="post">
  <select name="city" id="city" multiple=true>
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>

属性说明

  • multiple:布尔属性,设置后为多选,否则默认单选
  • disabled:禁用
  • selected:默认选中该项
  • value:定义提交时的选项值

label标签

定义:

<label> 标签为 input 元素定义标注(标记)。

说明:

  1. label 元素不会向用户呈现任何特殊效果。
  2. <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action="">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
</form>

// 也可以写成这样
<form>
    <input type='text' id='username' name='username'>
</form>

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">默认内容</textarea>

属性说明

  • name:名称
  • rows:行数
  • cols:列数
  • disabled:禁用

jQuery 操作 from

input 的文本框

// 获取值
$("#txt").attr("value");
$("#txt").val()

// 设置值
$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容

input 的多选框 checkbox

// 获取值
$("#chk1").attr("value");

// 设置值,所有的jquery版本都可以这样赋值
$("#chk1").attr("checked",'');        //不打勾
$('#chk1').attr("checked", false);    //不打勾
$("#chk2").attr("checked",true);      //打勾
$("#chk2").attr("checked","checked"); //打勾

// 设置值,jquery1.6+:prop的4种赋值:
// $("#cb1″).prop("checked",true); //很简单就不说了哦
// $("#cb1″).prop({checked:true}); //map键值对


// 判断是否已经打勾
if ($("#chk1").attr('checked')==undefined){}  //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
if ($("#chk1").is(':checked')){} //所有版本:true/false//别忘记冒号哦
if ($("#chk1").get(0).checked) {}
if ($("#chk1")[0].checked) {}
if ($('#chk1').prop('checked')) {}  //16+:true/false


//设置checkbox为禁用状态(jquery<1.6用attr,jquery>=1.6建议用prop)
$("input[type='checkbox']").attr("disabled", "disabled");//or
$("input[type='checkbox']").attr("disabled", true);//or
$("input[type='checkbox']").prop("disabled", true);//or
$("input[type='checkbox']").prop("disabled", "disabled");

//设置checkbox为启用状态(jquery<1.6用attr,jquery>=1.6建议用prop)
$("input[type='checkbox']").removeAttr("disabled");//or
$("input[type='checkbox']").attr("disabled", false);//or
$("input[type='checkbox']").prop("disabled", "");//or
$("input[type='checkbox']").prop("disabled", false);

input 的单选框 radio

 
//获取radio被选中项的值
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='items']:checked").val();
$(“input[@name=items]:checked”).val();
$("input[@type=radio][@checked]").val();

// radio单选组的第二个元素为当前选中值
$('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2....
$('input:radio').slice(1,2).attr('checked', 'true');
$('input[@name=items]').get(1).checked = true;

//设置value=2的项目为当前选中项
$("input[@type=radio]").attr("checked",'2');
$("input:radio[value=http://www.2cto.com/kf/201110/'rd2']").attr('checked','true');
$("input[value=http://www.2cto.com/kf/201110/'rd2']").attr('checked','true');


// 设置第一个Radio为选中值:
$('input:radio:first').attr('checked', 'checked');
$('input:radio:first').attr('checked', 'true');
$('input:radio:first').attr('checked', true);
注:attr("checked",'checked')= attr("checked", 'true')= attr("checked", true)


// 删除Value值为rd2的Radio
$("input:radio[value=http://www.2cto.com/kf/201110/'rd2']").remove();


// 删除第几个Radio
$("input:radio").eq(索引值).remove();索引值=0,1,2....

// 如删除第3个Radio:
$("input:radio").eq(2).remove();

//遍历Radio
$('input:radio').each(function(index,domEle){
  //写入代码
});

select 标签

// 获取选中项
$('#sel option:selected').val();
$('select#sel').find('option:selected').val();


// 获取选中项的Text值:
$('select#seloption:selected').text();
$('select#sel').find('option:selected').text();
$("select[@name=items] option[@selected]").text();


// 设置第一个option为选中值:
$('select#sel option:first').attr('selected','true')
$('select#sel')[0].selectedIndex = 0;
$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("<optionvalue='1'>1111</option><optionvalue='2'>2222</option>")
.appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框


// 获取当前选中项的索引值:
$('select#sel').get(0).selectedIndex;

// 获取当前option的最大索引值:
$('select#sel option:last').attr("index")

// 获取DropdownList的长度:
$('select#sel')[0].options.length;
$('select#sel').get(0).options.length;
 

本文地址:https://blog.csdn.net/fenglepeng/article/details/112546265

相关标签: 前端