DOM之表格与表单基础分享

我是沐晴,好久不见。马上要放假啦,也是比较的忙。 今天来谈谈表格和表单的基本知识。前期的写的都是比较基础的知识,后期会慢慢增加实例。一起来学习吧。

先看表格,DOM中提供了一些属性,便于我们获取表单节点:tBodies tHead  tFoot  rows(行)  cells(列)(带S的都是获取的是一组元素)

var oTab = document.getElementById(‘tab‘);
oTab.tBodies[0].rows[1].cells[0] //获取第二行的第一个

注意,写表格的时候最好加上tbody,你不加页面也会自动帮你加tbody 所以自己写的时候 最好加上。表格内容比较简单,下面直接看看表单

首先是表单节点的获取:所有表单节点的获取不仅可以通过 JS方法用 ID等获取,DOM给我们的提供了方法,可以直接通过name获取的,而且任何浏览器都支持的。(name属性在表单中是非常重要的,因为后端就是通过这个来识别属性,所以没有name,是无法提交数据的,一定要记得写。)如下:

  var oForm = document.getElementById(‘form1‘);
  alert(oForm.text1.value); //1
 <form id="form1">
     <input type="text" name="text1" value="1"> </form>
注意:如果是一组元素,名字要一样,比如下面的单选框radio,这样选择男的时候 女就不会被选中,才能实现单选的效果。checkbox和radio是一样的。
var oForm = document.getElementById(‘form1‘);
<form id="form1">
     <input type="radio" name=‘sex‘ value="man">man
     <input type="radio" name=‘sex‘ value="woman">woman
</form>
 //这个时候oForm.sex 获取的是一组元素,是一个类数组,oForm.sex[0] oForm.sex[1],访问的时候也可以用循环。

下拉列表中,value指的是下面的列表中带有selected属性的值

alert(oForm.city.value);//上海
// 这里的值是下面的列表中带有selected属性的值
<select name="city" value=‘‘>
        <option value="">请选择城市</option>
        <option value="北京">北京</option>
        <option value="上海" selected>上海</option>
 </select>
然后来看看表单的一些常用事件:onchange(当光标离开的时候相比原来 内容有变化的时候触发 )在不同的表单以及浏览器中,存在区别,如下:

    text : 当光标离开文本框的时候再去判断值是否发生了变化,如果发生了变化则触发onchange事件

    radio /checkbox :标准浏览器下点击的时候,不管焦点是否离开,只要值相比原来发生改变就触发onchange事件。非标准下焦点离开的时候如果值变了才会触发。

    select:只要选中某个元素和原来的不一样就会触发。

var oForm = document.getElementById(‘form1‘);
oForm.text1.onchange = function(){
     alert(this.value);//1
}
for(var i =0;i<oForm.sex.length;i++){
    oForm.sex[i].onchange = function(){
       alert(this.value);
   }
}
oForm.city.onchange = function(){
     alert(this.value);//上海
}

 <form id="form1">
     <input type="text" name="text1" value="1">
     <input type="radio" name=‘sex‘ value="man">man
     <input type="radio" name=‘sex‘ value="woman">woman
    <select name="city" value=‘‘>
        <option value="">请选择城市</option>
        <option value="北京">北京</option>
        <option value="上海" selected>上海</option>
    </select>
</form>

onsubmit:当提交表单的时候触发。
例:用户未输入内容的时候不让提交。

oForm.onsubmit = function(){
   if(this.text1.value == ‘‘){
       alert(‘请输入内容‘);
       return false;  //浏览器的默认行为是提交到指定地址,所以我们为空不让提交,就需要阻止默认行为
   }
}

DOM中还提供了一个提交方法:submit():提交表单
例:想在一段时间后,让表单自动提交
setTimeout(function(){

oForm.submit();

},1000)// 自动提交表单

onreset : 当重置表单的时候触发。

例子:当点击了重置,提醒用户。

oForm.onreset = function(){
  var re =  confirm(‘你确定要重置吗‘);//当用户点击确定re为真 取消为假
  return re;
}
// confirm 默认会弹出对话框让用户选择确定还是取消,它有一个返回值,确定为真 取消为假,并且只有用户做出选择之后才会指向后面的代码,所以把选择结果作为返回值,选择取消,就会阻止默认事件了

好啦,今天的知识点分享完毕啦。不见不散。

时间: 07-06

DOM之表格与表单基础分享的相关文章

表格和表单基础研究~

表格的基本形式:table>tbody>tr>th*5^(tr*4>td*5). <table><!-- 表格 --> <caption><!-- 表格标题 --> this is table title! </caption> <tbody> <tr><!-- 行 --> <th>表格标题</th> <th>表格标题</th> <t

HTML之表格和表单

1. 表格和表单的区别:表格多用于页面布局,创建页面的排版样式.表单多用于传输数据获取信息,如:input输入框,单选.多选.下拉选择框. 2. 表格:table. a. 基本样式如下: <table> <caption> table test </caption> <tr> <td rowspan="2">1</td> <td>2</td> </tr> <table/&g

第3天:CSS浮动、定位、表格、表单总结

今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑开宽度4.脱离文档流5.提升层级半层二.clear清除浮动1.加高(扩展性不好)给浮动元素的父级设置同样的高度2.给父级加浮动(页面中所有元素都要加浮动,margin左右失效)3.inline-block(margin左右auto失效)4.空标签加浮动(div )(任何用到的地方都要加).clear

css011 表格和表单的格式化

css011 表格和表单的格式化 一.    让表格专司其职    Html中创建一个三行三列的表格 <table> <caption align="bottom"> table 1:cosmofarmer.com's indoor mower roundup </caption> <colgroup> <col id="brand"></col> <col id="price&

【2016.11.27】表格和表单练习

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> table{border-collapse:collapse;} span{color:#f00;} </style> <title>表格和表单</title> </head> <body>

HTML中的表格、表单元素与框架的构建

表格 <table></table>表格 width: 宽度可用像素或百分比: height:高度可用像素或百分比: border:边框宽度: cellpadding:内容跟单元格边框的边距 常用0: cellspacing:单元格之间的间距  常用0: align: 对齐方式: bgcolor:背景色: <tr></tr> 行 align:一行内容的水平对齐方式: valign: 垂直对齐方式: <td></td> 单元格 <

表格、表单操作

(一)表格操作 方法:tHead ==>表格头tBodies ==>表格正文(可以有多个)(在js中如果不写,自动会添加,易出错)tFoot ==>表格尾rows ==>行cells ==>列eg:oTab.tBodies[0].rows[1].cells[1].innHTML(获取表格的第一个正文的第二行第二列的内容)=oTab.children[0].children[1].children[1].innHTML (二)表单操作<form id='form1'>

HTML day03表格与表单

1.表格 一般格式: <table> <thead><!--表格头--> <tr> <th></th> </tr><!--表格中的一行数据--> </thead> <tbody><!--表格体--> <tr> <td></td> </tr> </tbody> <tfoot><!--表格脚-->

HTML静态网页:表格、表单

一.表格table table的属性 width        宽度,可以用百分比或者像素,像素常用960 border       边框,常用值是0 cellpadding  表格内容与单元格边框的边距,常用值0 cellspacing  单元格之间的间距,常用值0 align        单元格里面内容的对齐方式 bgcolor      背景色 background   背景图片 <tr></tr>行,属性 align        一行内容的水平对齐方式 valign