实用HTML小知识点
1.用JavaScriptform表单的验证,有如下表单
<form action="" method="post" onsubmit="return check_all()"> <table> <tr> <td class="weight_b">用户名:</td> <td><input onblur="check_name()" type="text" name="uname" id="uname" maxlength="16"/></td> <td id="text1"><span>*</span> (英文、汉字、数字、 6-16个字符)</td> </tr> <tr> <td class="weight_b">密码:</td> <td><input onblur="check_pwd()" type="password" name="pwd" id="pwd" maxlength="16" /></td> <td id="text2"><span>*</span> (6-16个字符)</td> </tr> <tr> <td></td> <td id="btn"><input type="submit"/></td> <td></td> </tr> </table> </form>
a.文本框的内容验证,需要JS通过表单元素的name拿到该元素里面的内容,
再将该内容与正则表达式匹配,看是否符合,正确返回true,错误给出提示
(还是先拿到用于显示提示的表单元素对象,在用innerHTMl属性给该对象
填入内容,显示在页面上),例如我们验证用户名长度要大于6:
function check_name(){ var uname=document.getElementById('uname').value; var txt1=document.getElementById('text1') if(uname.length<6){ txt1.innerHTML="<span>◎用户ID长度不够 </span> (英文、汉 字、数字、6-16个字符)"; return false; }else{ txt1.innerHTML="<span>v</span>"; } }
b.表单的提交,表单在用户点击submit按钮后会通过form的method方法提交
到action对应的地址。记得一定要写onsubmit属性,否则表单未提供js验证
也会提交!,例如
function check_all(){ if(check_name()&&check_pwd()){ return true; }else{ return false; } }
2.用css操作元素的display属性可以做下拉菜单,图片切换之类的特效哦
例如,我们在div中有4张图片,4个按钮,代码如下:
<div> <div id="one" style="display:''"><img src="img/a.jpg" alt="" height="300px"/></div> <div id="two" style="display:none"><img src="img/b.jpg" alt="" height="300px"/></div> <div id="three" style="display:none"><img src="img/c.jpg" alt="" height="300px"/></div> <div id="four" style="display:none"><img src="img/d.jpg" alt="" height="300px"/></div> <div id='btn'> <input type="button" id="1th" onclick="change(1)" value='1'"/> <input type="button" id="2th" onclick="change(2)" value='2'/> <input type="button" id="3th" onclick="change(3)" value='3'/> <input type="button" id="4th" onclick="change(4)" value='4'/> </div> </div>
如何通过点击按钮切换图片呢,由于div的特性,我们只要把按钮对应的图片设置为显示,其他不显示即可。代码如下:
function change(ele){ var div1=document.getElementById('one'); var div2=document.getElementById('two'); var div3=document.getElementById('three'); var div4=document.getElementById('four') if(ele==1){ div1.style.display=''; div2.style.display='none'; div3.style.display='none'; div4.style.display='none'; }else if(ele==2){ div1.style.display='none'; div2.style.display=''; div3.style.display='none'; div4.style.display='none'; }else if(ele==3){ div1.style.display='none'; div2.style.display='none'; div3.style.display=''; div4.style.display='none'; }else if(ele==4){ div1.style.display='none'; div2.style.display='none'; div3.style.display='none'; div4.style.display=''; } }
相关推荐
107条常用知识点 欢迎大家前来分享 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,...
《微软技术丛书:HTML 5从入门到精通》旨在介绍HTML5的基础知识,沿用经典的STEP BY STEP风格,一次介绍一个知识点,并通过练习来加以巩固。这本实用教程提供了清楚的指导和动手实例,有利于读者使用HTML5的核心特性...
书中所有知识点均结合实例进行讲解,方便读者动手实践。同时在每章的最后还设置了习题,通过这些习题可以对本章学到的知识进行巩固。《HTML5从入门到精通》不仅能够使读者系统而全面地学习理论知识,还能满足读者...
书中所有知识点均结合实例进行讲解,方便读者动手实践。同时在每章的最后还设置了习题,通过这些习题可以对本章学到的知识进行巩固。《HTML5从入门到精通》不仅能够使读者系统而全面地学习理论知识,还能满足读者...
书中所有知识点均结合实例进行讲解,方便读者动手实践。同时在每章的最后还设置了习题,通过这些习题可以对本章学到的知识进行巩固。《HTML5从入门到精通》不仅能够使读者系统而全面地学习理论知识,还能满足读者...
书中所有知识点均结合实例进行讲解,方便读者动手实践。同时在每章的最后还设置了习题,通过这些习题可以对本章学到的知识进行巩固。《HTML5从入门到精通》不仅能够使读者系统而全面地学习理论知识,还能满足读者...
本书在小程序技术基础上增加了基本CSS布局知识点,讲解细腻,手把手带领读者快速入门小程序开发。 内容简介 《微信小程序:开发入门及案例详解》本书全面介绍微信小程序的开发思路、技术、工具与案例,涉及小程序...
本书从实用角度出发,详细讲解了HTML、CSS和Javascript的基本语法和设计技巧,通过一个实用的班级网站的规划、设计、实现到发布过程,将各章的知识点贯穿起来,各章均配有习题和实验,力求达到理论知识与实践...
书中所有知识点均结合实例进行讲解,方便读者动手实践。同时在每章的最后还设置了习题,通过这些习题可以对本章学到的知识进行巩固。《HTML5从入门到精通》不仅能够使读者系统而全面地学习理论知识,还能满足读者...
html常用代码,经过看课本和实践后整理的,有较强的实用性与针对性,且每个知识点有相应的例子,帮助理解。希望能给朋友们带来点帮助。
在讲解时对每个操作过程的每个步骤都有详细说明,并配有适量的图形,以方便读者能够直观地理解相关的知识点。同时还对知识点进行扩展,让读者可以举一反三,做到活学活用。 本书所介绍的内容翔实而实用,步骤讲解...
个人总结的笔记 , 觉得很好用。其中有详细的html知识点的总结和概述,个人觉得很实用,适合于初学者。
本书主要对ASP.NET网页编程做了系统的介绍,本书的特色是以案例为主,以知识点为主线,全书有近30个完整的案例和200多个基本案例程序。本书对C#的编程概念也何等了简单的介绍。对ASP.NET主要是从其几大常用对象出发,...