javascript学习笔记之DOM与表单

DOM(文档对象模型),猫叔了一个层次化的节点树一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节点类型,利用12个数值来表示.1代表Element,2代表attribute,3代表Text... 2) NodeName与NodeValue 这两个属性的值完全取决于特定的节点类型 2.节点关系相关属性 I.childNodes属性,返回一个NodeList对象,这是一个有生命,会呼吸的对象,能够…

Django学习笔记（五）—— 表单

疯狂的暑假学习之 Django学习笔记(五)-- 表单參考:<The Django Book> 第7章 1. HttpRequest对象的信息 request.path 除域名以外的请求路径,斜杠开头 "/hello/" request.get_host() 主机名 …

Flutter学习笔记（13）--表单组件

如需转载,请注明出处:Flutter学习笔记(13)--表单组件表单组件是个包含表单元素的区域,表单元素允许用户输入内容,比如:文本区域,下拉表单,单选框.复选框等,常见的应用场景有:登陆.注册.输入信息等.表单里有两个重要的组件,一个是Form组件用来做整个表单提交使用的,另一个是TextFormField组件用来做用户输入的. Form组件属性属性类型说明 Key Key 组件在整个Widget树中的key值 autovalidate bool 是否自动提交表单 child Widg…

ng2 学习笔记（二）表单及表单验证

在上一篇文章中提到了表单,只说了表单的数据绑定,这一篇文章主要讲一下表单验证,为什么把表单单独拿出来学习,主要是因为,表单是商业应用的支柱,我们用它来执行登录.求助.下单.预订机票.安排会议,以及不计其数的其它数据录入任务,使用频率非常高.所以这块的重要性就显而易见了. 正文开始,这篇文章还是适合初学者,如果是大神,请指正不足: 先来看一下最终的样子: 表单很简单,模拟新增客户,用到表单的不少控件, 首先,要使用angular 的表单的一些控件,在使用ngModel做双向数据绑定之前,得先导入F…

Javascript高级编程学习笔记（75）—— 表单（3）表单字段

表单字段表单作为web应用中不可或缺的一部分,当然也是可以使用原生的 DOM 元素来访问的除了标准的访问方式之外,每个表单都拥有一个 elements 属性,该属性保存着该表单所有表单元素的集合,该集合是一个有序列表,包含着所有的表单字段这些元素在该集合中出现的顺序,与在文档中出现的顺序一致在该集合中可以使用 name 和在文档中的顺序来对其中的元素进行索引若有多个表单元素拥有相同的 Name,那么将会返回一个 nodelist 集合以下方的HTML代码片段为例: <form…

Javascript高级编程学习笔记（80）—— 表单（8）表单序列化

表单序列化随着 Ajax 的出现,表单序列化成为一种常见需求以将表单信息序列化为查询字符串为例我们可以利用表单的 type 属性,以及 name 和 value 实现对表单的序列化序列化应满足以下几点要求: 对表单字段和值进行 url 编码,使用 & 符号分割不发送表单的禁用字段只发送勾选的复选框和单选按钮不发送 type 为 "reset" 和 "button" 的按钮多项选择为每一个选中的项单独一个条目在点击提交按钮提交的情况下,也会发…

Javascript高级编程学习笔记（77）—— 表单（5）过滤输入

在日常实践中,我们常常会需要用户按照某种规则输入数据但是文本框在默认情况下缺少验证数据的手段,因此需要使用JS来完成此类过滤输入的操作通过事件和DOM的结合手段就能够将普通的文本框转换为功能型控件屏蔽字符有时候我们需要用户的输入不包含某些字符所以我们可以通过阻止 Keypress 事件的默认事件来完成屏蔽字符的功能以如下代码为例,可以实现一个只能输入数字的文本框 var textbox = document.getElementById("myInput"); text.a…

Javascript高级编程学习笔记（78）—— 表单（6）HTML约束验证API

自动切换焦点使用JS可以极大地提升表单的易用性其中最常用的一种就是当用户填写完当前字段后焦点自动切换到下一个字段以下方的HTML代码为例: <input type="text" name="tel1" id="txtTel1" maxlength="3"> <input type="text" name="tel2" id="txtTel2"…

Javascript高级编程学习笔记（74）—— 表单（2）表单提交及重置

表单提交表单的很大一部分作用就是帮助用户完成和服务器的交互所以表单提交是表单中比较重要的部分虽然现如今的大部分应用场景都使用 AJAX 的异步请求来代替表单,但是仍有部分操作需要使用表单来完成,例如上传文件等表单的提交一般来说是通过图像按钮,或者提交按钮来实现的提交按钮既可以是 input 元素也可以是 button 元素,如下所示:  <input type = "submit" value = "Submit For…

Javascript高级编程学习笔记（73）—— 表单（1）表单基础

表单 JS最初的一个用途就是帮助服务器分担处理表单的责任时至今日,虽然web应用以及JS都有了长足的发展,但是表单依然是现在web应用中比较重要的部分. 因为默认的表单控件很丑,所以有时候我们会使用自定义的组件来完成表单的功能,这就需要我们对表单有一个较为详细的了解. 表单基础在HTML中,表单是由 <form> 元素表示的,在JS中表单则对应了 HTMLFormElement 类型该类型继承自 HTMLElement ,因此表单拥有与其它HTML元素相同的默认属性不过表单也有自己独有…

JavaScript自学笔记（1）---表单验证，let和const,JSON文件

今天开个JS自学笔记,本身JS的语法很简单,如果学过Java或者C系的都很容易,就不讨论了.主要是讨论实际应用的问题. 1.表单验证: a.html自动验证: HTML 表单验证可以通过浏览器来自动完成.如果表单字段 (fname) 的值为空, required 属性会阻止表单提交: <form action="demo_form.php" method="post"> <input type="text" name="…

JavaScript基础笔记（十）表单脚本

表单脚本一.表单基础知识 JavaScript中表单对应的是HTMLFormElement类型,该类型继承自HTMLElement类型. 通过document.forms可以获得所有表单元素,通过数值索引和name特性可以获得其中特定的表单. 一)提交表单单击提交按钮或者图像按钮就可以提交表单. 三种方式:  <input type='submit' value='submit value'>  <butt…

JavaScript 学习笔记-HTML&&DOM

HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有事件做出反应查找 HTML 元素通过 id 找到 HTML 元素 var x=document.getE…

SpringMVC:学习笔记(5)——数据绑定及表单标签

SpringMVC——数据绑定及表单标签理解数据绑定为什么要使用数据绑定基于HTTP特性,所有的用户输入的请求参数类型都是String,比如下面表单: 按照我们以往所学,如果要获取请求的所有参数的话,我们需要这样写: public String saveProduct(String name,String description,Integer price) {....} 但是我们发现这些参数都是描述一类事物的属性信息的,并且如果参数过多的话,将会加大我们修改和编写的负担.数据绑定是将用户…

Bootstrap学习笔记系列3-------Bootstrap简单表单显示

表单布局垂直或基本表单基本的表单结构时BootStrap自带的,创建基本表单的步骤如下: 向父<form>元素添加role = "form": 为了获取最佳的间距,把标签和控件放在一个div.form-group中,div放在父form下: 向所有的文本元素<input>.<textarea>和<select>添加.form-control <!DOCTYPE html> <html> <head>…

HTML&CSS基础学习笔记1.26-input重置表单

重置表单 <input>的[type]属性值为"button"的时候表示一个普通的按钮,相当于一个<button>标签. <input>的[type]属性值为"reset"时,表示表单重置,它在页面的表现形式也是个按钮,但点击他的时候会让表单重置到页面刚加载时的状态. 看一段代码吧: <!DOCTYPE html> <html lang="en"> <head> <me…

HTML之学习笔记（十）表单元素

html表单元素的基本格式为(必须包含在form标签中)…

Jquery学习笔记：操作form表单元素之一（文本框和下拉框）

一.概述在web页面开发中,经常需要获取和设置表单元素的值(如文本框中的内容),特别是在ajax应用中,更是常态.本文系统的介绍下如何操作. 同操作其它html元素一样,操作的过程差不多. 第一步,需要获取到表单元素对应的jquery(或dom)对象.这个主要是利用jquery的选择器机制. 第二步,调用表单元素的属性和方法来获取和设置值. 其中最常见的就是利用jquery对象的val方法.因为很多表单元素都有标准的 value属性,这个可以通过jquery的 val方法来读取和设置属性值.…

Vue.js 学习笔记第6章表单与v-model

本篇目录: 6.1 基本用法 6.2 绑定值 6.3 修饰符表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定. 6.1 基本用法表单控件在实际业务较为常见,比如单选.多选.下拉选择.输入框等,用它们可以完成数据的录入.校验.提交等. Vue.js提供了v-model指令,用于在表单类元素上双向绑定数据,例如在输入框上使用时,输入的内容会实时映射到绑定的数据上. 例如下面的例子: <div id="app"> <i…

Django学习笔记（3）——表单，测试和模板语法的学习

一,表单form 为了接收用户的投票选择,我们需要在前段页面显示一个投票界面,让我们重写之前的polls/detail.html文件,代码如下: <h1>{{ question.question_text }}</h1> {% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %} <form action="{% url 'p…

【Spring学习笔记-MVC-11--】Spring MVC之表单标签

一.使用方法 1.要使用Spring MVC提供的表单标签,首先需要在视图页面添加: <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> 2.form标签: <form:form modelAttribute="contentModel" method="post"> modelAttribute属性指定该…

Vue.js学习笔记第七篇表单控件绑定

本篇主要说明表单控件的数据绑定,这次没有新的知识点文本框 1.普通文本框 <div id="app-1"> <p><input v-model="textBox" placeholder="输入内容...">输入的内容:{{ textBox }}</p> </div> <script type="text/javascript"> var vm1 = n…

MVC3 学习笔记之（ajax表单）

mvc 提供了一种ajax提交表单的方式.与普通表单不同的是,它是一个异步表单. 在开始使用之前,需要引用以下文件: <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.unob…

html+css学习笔记 5[表格、表单]

表格 -- 默认样式重置表格标签: table 表格 thead 表格头 tbody 表格主体 tfoot 表格尾 tr 表格行 th 元素定义表头 td 元素定义表格单元表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充单元格合并 rowspan 属性规定单元格可横跨的行数. <td rowspan="2"…

HTML之学习笔记（九）表单

html的表单标签是一个系列,用开闭的<form>标签包裹起来的组合.表单的作用是将我们要向服务器提交数据的数据包含起来,然后提交到服务器处理.(使用表单是浏览器提交客户端数据到服务端的方法之一,其它的方法涉及到asp.net技术). 代码演示 <html> <head></head> <body> <form action="" method="post"> <input type=&q…

HTML5学习笔记五：html5表单

表单是页面上非常重要的一块内容,用户可输入的大部分内容都是在表单元素中完成的,与后台的交互大多数也是通过点击表单中的按钮. 一.新增的元素和属性 1.新增属性: 1.1 form属性:页面中的任何元素指定form属性,属性值为相应表单的id,该元素就属于指定表单了:只有Opera 10支持. 1.2 placeholder属性:文本框处于未输入状态且未获取光标焦点时,模糊显示输入提示文字:Safari 4,chrome3,firefox4 1.3 autofocus属性:打开页面时,有该属性的控…