红宝书第14章整理——表单

来源：互联网发布：建筑工程招投标软件编辑：程序博客网时间：2024/06/05 15:40

1、基础知识

①关于name 与id 区别

ID就像是一个人的身份证号码，而Name就像是他的名字，ID显然是唯一的，而Name是可以重复的。

ID和html页面内部元素相关，不和页面元素的内容相关。name则更多地和页面元素的内容相关

所以ID更多是在DOM中使用，name更多在后台服务器端调用。

关于name的使用：

用途1: 作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。
    用途2: HTML元素Input type='radio'分组，我们知道radio button控件在同一个分组类，check操作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的。
    用途3: 建立页面中的锚点，我们知道<a href="URL">link</a>是获得一个页面超级链接，如果不用href属性，而改用Name，如：<a name="PageBottom"></a>，我们就获得了一个页面锚点。
    用途4: 作为对象的Identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其Name来引用该对象。
    用途5: 在IMG元素和MAP元素之间关联的时候，如果要定义IMG的热点区域，需要使用其属性usemap，使usemap="#name"(被关联的MAP元素的Name)。
    用途6: 某些特定元素的属性，如attribute，meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Dave Raggett">。

    显然这些用途都不是能简单的使用ID来代替掉的，所以HTML元素的ID和Name的却别并不是身份证号码和姓名这样的区别，它们更本就是不同作用的东西。

    当然HTML元素的Name属性在页面中也可以起那么一点ID的作用，因为在DHTML对象树中，我们可以使用document.getElementsByName来获取一个包含页面中所有指定Name元素的对象数组。Name属性还有一个问题，当我们动态创建可包含Name属性的元素时，不能简单的使用赋值element.name = "..."来添加其Name，而必须在创建Element时，使用document.createElement('<element name = "myName"></element>')为元素添加Name属性。

② 提交表单

一般用户点击提交按钮或者图像时，就会提交表单内容

定义方式2种：

用input定义：<input type = "submit" value="Submit button"> / <input type = "submit" src = "a.gif">

直接用button定义：<button type = "submit" >Submit button</button>

若不想触发submit事件，用户自定义提交，可用form.submit() ;

注意：

1、提交表单最大的问题，就是重复提交表单。比如用户重复按多次按钮。解决办法：在第一次提交表单后就禁用提交按钮，或，用onsubmit事件忽略后续的提交

2、若要给submit按键添加事件处理程序，注意事件不要用onclick，要用onsubmit！因为不同浏览器对于onclick与onsubmit处理方法不一样，可能存在先后顺序的时差

③ 重置表单

type=reset

这样一按就全部清空

或者form.reset（）

④表单字段

可以用DOM方法访问表单字段。每一个表单都有elements属性，该属性是表单所有表单字段的集合，是一个有序列表。

例如是按照顺序的<input> <textarea> <button>等等，

var form = document.getElementById("form");var field1 = form.elements[0];    //取得表单第一个字段内容var field2 = form.elements["textbox1"]   //取得名为textbox1的字段

如果很多表单控件都使用相同的name，比如一组单选按钮，name就会返回一个nodelist

表单字段的属性：

当取得表单字段后，可以利用其以下属性：

disabled: 布尔值，表示是否被禁用

name：当前字段名称

value：当前字段最终要交给服务器的值

type：当前字段类型，例如CheckBox，radio //表单中特有的属性，不是innerHTML，而是控件自身的value

表单字段的属性：

focus() //获得焦点

blur() //失去焦点

form.elements[0].focus(); //自动将焦点放到第一个字段上

对应的事件： onfocus，onblur，change

2、文本框

input type = "text"

单行输入文本框。size可以设置文本框的宽高。value可以设置文本框的初始值。maxlength可以设置最大输入长度

<textarea>

多行输入，初始值不能用value写，要放在<></>之间，不能指定最大长度

方法：

select：用于选择文本框中的所有文本 —— textbox.select(); //不接受参数

事件：

select

可以用selectStart与selectEnd来取得选择的文本，二者都是偏移量

①校验输入内容

1、屏蔽字符：
一般会禁止用户输入违规字符，就可以利用keypress写事件监听，然后用正则来检测

用getCharCode(event) 来获取用户输入的字符编码

再用String.fromCharCode(charcode)来转回string，利用正则表达式来检测

如果检测失败，可用preventDefault来屏蔽

2、剪切板

还有cut，copy，paste等等事件

3、选择框（下拉）

<select> + <option>

 <select name="locaton" id = "location">  <option value="q">aaaa</option>  <option value="qq">bbbb</option>  <option value="qqq">cccc</option>  <option value="qqqq">dddd</option> </select>

对于每一个option都有一个option对象，有以下属性可以调用：

index：当前选项在所有option集合的索引

selected：布尔值，表示是否被选中

text：文本

value：值

option:所有选项的合集

var text= selectbox.options[0].text;   //第一个选项的文本var value = selectbox.option[0].value;   //第一个选项的值

选中的选项：

若为单选，则可以用selectedIndex来调取

举例：

var selectedoption = selectbox.options[selectbox.selectedIndex];   alert(selectedoption.value);alert(selectedoption.text);

若为多选，用selected+循环，看所有option谁的状态为selected，是的话push一个数组，这样调取。selectedIndex默认只能看一个，后面的选项无效

for(var i=0, len=selectbox.options.length; i<len; i++){  option = selectbox.options[i];  if(option.selected){     if(option.selected){      result.push(option);    //push到result数组中   } }}

4、序列化（提交表单）

是为了配和ajax技术，将name与value上传服务器时，将表单内容进行整合

name与value进行URL编码，然后用和号（&）分隔

然后有一些规定，比如禁用的不发送，只发送用户选择的选项，没选的不发送等等

书上有一段成熟的代码

5、富文本

富文本编辑（所见即所得）：

在页面中嵌入一个包含空HTML页面的iframe。通过设置designMode属性，这个空白的HTML页面可以被编辑，编辑对象就是该页面的<body>元素的HTML代码。

当designMode设置为on时，怎个文档都可以被编辑，然后就可以编辑文本，例如加粗斜体等等

实现：

方法一：

先自己写好一个HTML文档的格式，例如

<!DOCTYPE html><html><head>  <title>aaaa</title></head><body>      //此处可为空白，留着编写</body></html>

将这个文档命名为blank.html

然后，在程序中插入<iframe>

<iframe name="richedit" style="height:100px;width:100px;" src="blank.html"></iframe><script>   window.onload=function(){   frames["richedit"].document.designMode = "on";      }</script>

这样在打开window之后，就会出现一个类似于文本编辑框的可编辑区，但是具有跟网页一样的样式

方法二：

直接给元素标签设置contenteditable

<div class="a" id = "b"  contenteditable></div>

好处是不限于HTML文档iframe了，任何元素设置了这个属性都可以被编辑，该值可以改为true，false，inherit（继承父辈）

6、两个表单之间的互联（百度课程中涉及）

情景：两个下拉菜单，一个为城市，一个为大学。当选择城市时，大学的option会随之改变

直接上代码，具体在GitHub中有

//html中，先只写全所有的城市option，与第一个城市对应的所有大学//第一个select<select name="select1" id="select1">  <option value="beijing">北京</option>  <option value = "shanghai">上海</option>  <option value="guangzhou">广州</option></select>//第二个select，只写北京对应的就可以<select name="select2" id="select2">   <option value="qinghua">清华大学</option>   <option value="beida">北京大学</option></select>

接下来两个select的交互，实际上就是如何读取第一个select的选项内容，以及如何动态的改写第二个select的option内容

function select(){//先写好一组对象，名值对，分别是城市与大学的全部  var data={     beijing:["清华大学"，"北京大学"]，     shanghai:["上海交大"，"复旦大学"]，     guangzhou:["A大学","B大学"] }//接下来开始读取+更改var source = document.getElementById("select1");var target = document.getElementById("select2");var select = source.options[source.options.selectedIndex.value];    //注意这句，就是利用selectedIndex.value来读取用户选中项的内容target.innerHTML="";   //先清空原有的所有optionfor(var i=0 ; i<data[selected].length; i++){  var opt = document.creatElement("option");  opt.innerHTML = data[selected][i];    //将之前的目录内容写进去  document.getELementById("select2").appendChild(opt);    //把心的option写进去}}

0 0

红宝书 第14章整理——表单