表单验证+获取元素的三种方式

简介: 表单验证+获取元素的三种方式

JavaScript单词


onclick:点击事件

onmouseout:鼠标离开事件

onmouseover:鼠标移上去事件

onload:页面加载事件

onblur:失去焦点


表单验证


这个可以直接用,你们可以再加一点css样式就可以运用到项目当中,效果就是上面那张图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
</head>
  <body>
  <form action="http://www.baidu.com" method="post">
    用户名:<input type="text" /><br>
    密码:<input type="password" /><br>
    性别:<input name="sex" type="radio" />男
    <input checked="true" type="radio" name="sex" />女<br>
    爱好:
    <input name="like" type="checkbox" />吃饭饭
    <input name="like" type="checkbox" />睡觉觉
    <input name="like" type="checkbox" />打豆豆
    <input name="like" type="checkbox" />打打球<br>
    地址:
    <select>
    <option>北京</option>
    <option>南京</option>
    <option>东京</option>
    <option selected="selected">岛市</option>
    </select>
    <br />
    个性签名:
    <textarea>
    </textarea>
    <br>
    <button>普通按钮</button>
    <input type="button" value="普通按钮" />
    <input type="reset" value="重置按钮" />
    <input type="submit" value="提交按钮" />
    <input type="file" />
    <input type="image" src="images/zsd.JPG" />
  </form>
  </body>
</html>


获取元素的三种方式


获取ID单个元素

document.getElementById();

根据标签名获取元素

document.getElementBTagName();

根据标签name属性获取元素

document.getElementsByName('name属性值');
相关文章
|
8月前
|
JavaScript 前端开发
JavaScript如何遍历表单元素?
JavaScript如何遍历表单元素?
108 2
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
6月前
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
210 0
|
7月前
|
JavaScript 前端开发
原生JS如何查询元素属性
原生JS如何查询元素属性
57 0
|
JavaScript 前端开发
Javascript知识【jQuery:查找元素操作&案例:模拟用户分组】
Javascript知识【jQuery:查找元素操作&案例:模拟用户分组】
|
JavaScript 前端开发
JavaScript基础之操作元素,修改元素属性
JavaScript基础之操作元素,修改元素属性
71 0
layui动态表格条件语句判断的方式
layui动态表格条件语句判断的方式
245 0
element表单嵌套检验+动态添加
element表单嵌套检验+动态添加
334 0
|
前端开发 算法 JavaScript
【JavaScript-事件②】表单元素的属性操作,密码显示隐藏的实现
阅读使人充实,会谈使人敏捷,写作使人精确。 ——培根
155 0
【JavaScript-事件②】表单元素的属性操作,密码显示隐藏的实现
|
JavaScript Java
动态添加表格并增加Jquery校验
动态添加表格并增加Jquery校验
105 0

热门文章

最新文章