前端之 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种赋值，强推下列的赋值方法，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为禁用状态(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;

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/453859.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

代码 优化 指南 实践

代码 优化 指南 实践

C代码优化方案 华中科技大学计算机学院 姓名&#xff1a; 王全明 QQ&#xff1a; 375288012 Email&#xff1a; quanming1119163.com 目录 目录 C代码优化方案 1、选择合适的算法和数据结构 2、使用尽量小的数据类型 3、减少运算的强度 &#xff08;1&…
阅读更多...
.12-浅析webpack源码之NodeWatchFileSystem模块总览

.12-浅析webpack源码之NodeWatchFileSystem模块总览

剩下一个watch模块&#xff0c;这个模块比较深&#xff0c;先大概过一下整体涉及内容再分部讲解。 流程图如下&#xff1a; NodeWatchFileSystem const Watchpack require("watchpack");class NodeWatchFileSystem {constructor(inputFileSystem) {this.inputFileSy…
阅读更多...
Python 第三方模块之 beautifulsoup（bs4）- 解析 HTML

Python 第三方模块之 beautifulsoup（bs4）- 解析 HTML

简单来说&#xff0c;Beautiful Soup是python的一个库&#xff0c;最主要的功能是从网页抓取数据。官方解释如下&#xff1a;官网文档 Beautiful Soup提供一些简单的、python式的函数用来处理导航、搜索、修改分析树等功能。 它是一个工具箱&#xff0c;通过解析文档为用户提供…
阅读更多...
modal vue 关闭_Vue弹出框的优雅实践

modal vue 关闭_Vue弹出框的优雅实践

引言页面引用弹出框组件是经常碰见的需求,如果强行将弹出框组件放入到页面中,虽然功能上奏效但没有实现组件与页面间的解耦,非常不利于后期的维护和功能的扩展.下面举个例子来说明一下这种做法的弊端.click"openModal()">点击 :is_open"is_open" close…
阅读更多...
Python 第三方模块之 lxml - 解析 HTML 和 XML 文件

Python 第三方模块之 lxml - 解析 HTML 和 XML 文件

lxml是python的一个解析库&#xff0c;支持HTML和XML的解析&#xff0c;支持XPath解析方式&#xff0c;而且解析效率非常高 XPath&#xff0c;全称XML Path Language&#xff0c;即XML路径语言&#xff0c;它是一门在XML文档中查找信息的语言&#xff0c;它最初是用来搜寻XML文…
阅读更多...
(转)Linux下PS1、PS2、PS3、PS4使用详解

(转)Linux下PS1、PS2、PS3、PS4使用详解

Linux下PS1、PS2、PS3、PS4使用详解 原文&#xff1a;http://www.linuxidc.com/Linux/2016-10/136597.htm 1、PS1——默认提示符 如下所示&#xff0c;可以通过修改Linux下的默认提示符&#xff0c;使其更加实用。在下面的例子中&#xff0c;默认的PS1的值是“\s-\v\$”,显示出…
阅读更多...
开放平台大抉择

开放平台大抉择

开放平台大抉择之新浪SAE&#xff1a;为个人应用开发带来福音 导读&#xff1a;继上期淘宝网副总裁王文彬从平台功能特色、运营状况等多方面分享了淘宝开放平台的历程和挑战之后。国内另一家云平台服务方的典型代表——Sina App Engine(简称SAE)&#xff0c;作为新浪研发中心于…
阅读更多...
ip68级防水可以泡多久_iPhone8防水级别升级至IP68：能在1.5米深水中坚持30分钟

ip68级防水可以泡多久_iPhone8防水级别升级至IP68：能在1.5米深水中坚持30分钟

1月15日&#xff0c;业界最新的泄密消息显示&#xff0c;苹果拟在今年推出的“iPhone 8”智能手机会是一款革命性的手机&#xff0c;功能和配置就不多说了。苹果还将解决iPhone 7的一个重要缺陷&#xff0c;就是大大增强iPhone 8的防水性能&#xff0c;防水级别达IP68。《韩国先…
阅读更多...
HTTP POST 发送数据的参数 application/x-www-form-urlencoded、multipart/form-data、text/plain

HTTP POST 发送数据的参数 application/x-www-form-urlencoded、multipart/form-data、text/plain

HTTP 简介 HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。 其中 POST 一般用来向服务端提交数据&#xff0c;本文主要讨论 POST 提交数据的几种方式。 我们知道&#xff0c;HTTP 协议是以 ASCII 码传输&#xff0c;建…
阅读更多...
vue 二进制文件的下载（解决乱码和解压报错）

vue 二进制文件的下载（解决乱码和解压报错）

问题描述&#xff1a;项目中使用的是vue框架进行开发&#xff0c;因为文件下载存在权限问题&#xff0c;所以并不能通过 a 链接的 href 属性直接赋值 URL进行下载&#xff0c; &#xff08;如果你的文件没有下载权限&#xff0c;可以直接通过href属性赋值URL的方法进行文件下载…
阅读更多...
Python 第三方模块之 psutil - 获取系统运行的进程和系统利用率信息

Python 第三方模块之 psutil - 获取系统运行的进程和系统利用率信息

一、psutil模块: 官方网址&#xff1a;http://pythonhosted.org/psutil/ 1.psutil是一个跨平台库(http://pythonhosted.org/psutil/)能够轻松实现获取系统运行的进程和系统利用率&#xff08;包括CPU、内存、磁盘、网络等&#xff09;信息。它主要用来做系统监控&#xff0c;…
阅读更多...
石头机器人红灯快闪_机器人集体“快闪”活动爆红网络 “我是AI”与您相约智能新时代...

石头机器人红灯快闪_机器人集体“快闪”活动爆红网络 “我是AI”与您相约智能新时代...

原标题&#xff1a;机器人集体“快闪”活动爆红网络 “我是AI”与您相约智能新时代3月10日下午&#xff0c;天津科学技术馆内&#xff0c;悠扬美妙的歌声《我和我的祖国》突然响起&#xff0c;随后50个身形矫健的阿尔法机器人伴随着歌声翩翩起舞&#xff0c;动作整齐、科技感十…
阅读更多...
浅谈云计算与数据中心计算

浅谈云计算与数据中心计算

文/林仕鼎 云计算概念发端于Google和Amazon等超大规模的互联网公司&#xff0c;随着这些公司业务的成功&#xff0c;作为其支撑技术的云计算也得到了业界的高度认可和广泛传播。时至今日&#xff0c;云计算已被普遍认为是IT产业发展的新阶段&#xff0c;从而被赋予了很多产业和…
阅读更多...
无线网络实体图生成工具airgraph-ng

无线网络实体图生成工具airgraph-ng

无线网络实体图生成工具airgraph-ngairgraph-ng是aircrack-ng套件提供的一个图表生成工具。该工具可以根据airodump工具生成的CSV文件绘制PNG格式的图。绘制的图有两种类型&#xff0c;分别为AP-客户端关联图和通用探测图。通过AP-客户端关联图&#xff0c;可以更为直观的了解无…
阅读更多...
高等代数期末考试题库及答案_数学类高等代数期末考试试题A卷（含答案）

高等代数期末考试题库及答案_数学类高等代数期末考试试题A卷（含答案）

数学类高等代数期末考试试题A卷(含答案)课程编号MTH17063 北京理工大学2010-2011学年第一学期2009级数学类高等代数期末考试试题A卷班级 学号 姓名 成绩 一、(25分)设表示域上的所有阶矩阵构成的上的线性空间。取定&#xff0c;对于任意的&#xff0c;定义。(1)证明为上的一个线…
阅读更多...
cocos2d-lua3.7组件篇(三)-http通信demo

cocos2d-lua3.7组件篇(三)-http通信demo

客户端使用lua、服务端使用QT做为服务器。 步骤&#xff1a; 客户端 -----------Post 用户名和密码 服务端接受Post请求&#xff0c;读取数据&#xff0c;返回response一、客户端代码 loadingImg require"app.scenes.LoadingLayer"local LoginScene class(&qu…
阅读更多...
数据挖掘：如何寻找相关项

数据挖掘：如何寻找相关项

导读&#xff1a;随着大数据时代浪潮的到来数据科学家这一新兴职业也越来越受到人们的关注。本文作者Alexandru Nedelcu就将数学挖掘算法与大数据有机的结合起来&#xff0c;并无缝的应用在面临大数据浪潮的网站之中。 数据科学家需要具备专业领域知识并研究相应的算法以分析对…
阅读更多...
Python 第三方模块之 selenium - 模拟操作 Chrome 浏览器

Python 第三方模块之 selenium - 模拟操作 Chrome 浏览器

1、安装selenium 1.1、Python 安装 selenium 模块 pip install selenium1.2、下载驱动 选择和自己chrom版本相对应的驱动到本地&#xff0c;下载地址 http://npm.taobao.org/mirrors/chromedriver/2、Python 操作 from selenium import webdriver import time import json…
阅读更多...
jupyter notebook代码导出_Jupyter Notebook导出包含中文的pdf_亲测有效

jupyter notebook代码导出_Jupyter Notebook导出包含中文的pdf_亲测有效

Jupyter Notebook是很好的数据科学创作环境&#xff0c;是非常方便的Python代码编辑器。jupyter提供导出的格式有.py、.html、.md、.pdf等。目前用其导出包含中文的pdf会遇到很多坑&#xff0c;网上也有一些解决方案&#xff0c;大致分为两种方式&#xff0c;一是安装 pandoc并…
阅读更多...
前端之使用 POST 提交数据并跳转

前端之使用 POST 提交数据并跳转

GET 方式 window.location.href是我们常用来在js中实现页面跳转的方法&#xff0c;这是使用get方式发送请求&#xff0c;示例如下 window.location.href url;优点是简单易用&#xff0c;缺点是如果有参数的话&#xff0c;参数会暴露在url地址中&#xff0c;这降低了系统的安…
阅读更多...
最新文章

Copyright @ 2022~2023