可以发广告的100个网站,用护卫神做网站,网站流量消耗计算,外贸企业邮箱哪个好用认识表单
在一个页面上可以有多个form表单#xff0c;但是向web服务器提交表单的时候#xff0c;一次只可以提交一个表单。要声明一个表单#xff0c;只需要使用 form 标记来标明表单的开始和结束#xff0c;若需要向服务器提交数据#xff0c;则在form标签中需要设置act…认识表单
在一个页面上可以有多个form表单但是向web服务器提交表单的时候一次只可以提交一个表单。要声明一个表单只需要使用 form 标记来标明表单的开始和结束若需要向服务器提交数据则在form标签中需要设置action属性用来设置提交表单的位置、method属性用来定义浏览器将表单中的信息提交给服务器端程序的处理方式、target属性用来指定服务器返回结果所显示的目标窗口或目标框架但是对于客户端脚本编程来说并不需要这些属性来帮助提交表单信息form标签存在的意义是在于方便在脚本中编程的时候进行引用。表单的引用可以利用from标签的name属性或者也可以利用document的forms[]数组中调用到对应的数组。可以利用form表单的elements[]数组来遍历除了input typeimage 元素之外的所有元素form表单的submit()方法用于将表单提交给服务但我们点击submit按钮的时候submit按钮会相应的调用onsubmit事件处理器从而调用Form对象的submit事件如何在浏览器中使用页面中的信息我们称之为“客户端脚本编程”而如何把信息提交给Web服务并将数据库保存在数据库中我们通常称为“服务器端脚本编程”在早期所有可交互的HTML元素都应该放在HTML表单中但是现在的定义是需要提交到web服务器的数据才必须要放在表单内可是前一种理解的方式也不是完全错误的因为一般可以交互的HTML元素都是表单元素在前期即浏览器需要处理的数据都是表单元素因此需要将其放在HTML表单中。
认识表单元素
大部分的表单控件元素都是由input标记创建的input标记具有一个type属性该属性决定了input标记所创建的表单控件的类型。所有的单控件对象都具有一个 nam e属性JavaScript 脚本通过 name 属性的值来引用特定的表单控件元素同时这也是表单提交到服务器时每个表单控件元素的值 value 所对应的 key 值。绝大部分对象都具有 value 属性该属性返回当前表单控件的值。所有的表单控件对象都具有一个 form 属性该属性返回包含当前控件的 Form 对象。对于一个通用的表单数据检查程序来说用这个属性来标明哪些控件属于哪个表单。所有的表单元素对象都具有focus()和blur()方法同时所有的表单元素对象还具有onfocus和onblur事件处理器。
表单元素的分类 常见的表单控件有 1、Text Input Elements:input typetext 、input typepassword、textarea/textarea 2、Tick Box Elements:input typecheckbox 、input typeradio 3、Select Elements:select size1option/option/select、select size5 multipleoption/option/select下拉大框、多选 4、Button:input typebutton、input typesubmit、input typereset
表单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 typetext /password密码输入框input typepassword /date日期输入框input typedate /checkbox复选框 我喜欢自行车input typecheckbox nameBike 我喜欢汽车input typecheckbox nameCar 备注name 可以不同 radio单选框 男性input typeradio checkedchecked nameSex valuemale / 女性input typeradio nameSex valuefemale / 备注name 必须一样 submit提交按钮input typesubmit value提交 /reset重置按钮input typereset value重置 /button普通按钮input typebutton value普通按钮 /hidden隐藏输入框input typehidden /file文本选择框input typefile methodpost enctypemultipart/form-data /
属性说明
name表单提交时的“键”注意和id的区别value表单提交时对应项的值 type 是 button, reset, submit时为按钮上显示的文本内容type 是 text,password,hidden时为输入框的初始值type 是 checkbox, radio, file为输入相关联的值checkedradio和checkbox默认被选中的项readonlytext和password设置只读disabled所有input均适用
select标签
form action methodpostselect namecity idcity multipletrueoption value1北京/optionoption selectedselected value2上海/optionoption value3广州/optionoption value4深圳/option/select
/form
属性说明
multiple布尔属性设置后为多选否则默认单选disabled禁用selected默认选中该项value定义提交时的选项值
label标签
定义
label 标签为 input 元素定义标注标记。
说明
label 元素不会向用户呈现任何特殊效果。label 标签的 for 属性值应当与相关元素的 id 属性值相同。
form actionlabel forusername用户名/labelinput typetext idusername nameusername
/form// 也可以写成这样
forminput typetext idusername nameusername
/form
textarea多行文本
textarea namememo idmemo cols30 rows10默认内容/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种赋值强推下列的赋值方法prop()函数的结果:匹配到的是属性attr()函数的结果:匹配到的是属性值
$(#cb1″).prop(checked,true);
$(#cb1″).prop(checked,false);
$(#cb1″).prop({checked:true});
$(#cb1″).prop({checked:false}); // 判断是否已经打勾
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为禁用状态(jquery1.6用attr,jquery1.6建议用prop)
$(input[typecheckbox]).attr(disabled, disabled);//or
$(input[typecheckbox]).attr(disabled, true);//or
$(input[typecheckbox]).prop(disabled, true);//or
$(input[typecheckbox]).prop(disabled, disabled);//设置checkbox为启用状态(jquery1.6用attr,jquery1.6建议用prop)
$(input[typecheckbox]).removeAttr(disabled);//or
$(input[typecheckbox]).attr(disabled, false);//or
$(input[typecheckbox]).prop(disabled, );//or
$(input[typecheckbox]).prop(disabled, false);
input 的单选框 radio //获取radio被选中项的值
$(input:radio:checked).val()
$(input[typeradio]:checked).val();
$(input[nameitems]:checked).val();
$(“input[nameitems]checked”).val();
$(input[typeradio][checked]).val();// radio单选组的第二个元素为当前选中值
$(input:radio).eq(索引值).attr(checked, true);索引值0,1,2....
$(input:radio).slice(1,2).attr(checked, true);
$(input[nameitems]).get(1).checked true;//设置value2的项目为当前选中项
$(input[typeradio]).attr(checked,2);
$(input:radio[valuehttp://www.2cto.com/kf/201110/rd2]).attr(checked,true);
$(input[valuehttp://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[valuehttp://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[nameitems] option[selected]).text();// 设置第一个option为选中值
$(select#sel option:first).attr(selected,true)
$(select#sel)[0].selectedIndex 0;
$(#sel).attr(value,-sel3);//设置value-sel3的项目为当前选中项
$(optionvalue11111/optionoptionvalue22222/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;
