Javascript进阶笔记

DOM简单学习

* 功能:控制html文档的内容
	*代码:获取页面的标签(元素)对象Element
		*document.getElementByid("id值");通过元素的id获取元素对象
	*操作Element对象:
		1.修改属性值:
			1.明确获取的对象是哪一个
			2.查看dpi文档,找其中有哪些属性可以设置
		2.修改标签体内容:
			*属性:innerHTML
			1.获取元素对象
			2.使用inner HTML修改标签体内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素对象</title>
</head>
<body>

    <img src="../image/桌面.png" id="images">
    <h1 id="title">悔创阿里杰克马</h1>

    <script !src="">
    //更换属性值
        //通过id获取元素对象
        var images = document.getElementById("images");
        alert("更换图片");
        images.src="../image/锁屏.jpg";
    </script>
    
    <script !src="">
        //修改h1内容
        var title = document.getElementById("title");
        alert("更换标题");
        title.innerHTML = "不识妻美刘强东";
    </script>

</body>
</html>

事件简单学习

*概念:某些组件被执行了某些操作后,触发某些代码的执行
*如何绑定事件
	1.直接在html标签上,指定事件的属性,属性值就是js代码
		1.事件:onclick-------单击事件
	2.通过js获取元素对象,指定事件属性,设置一个函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>

</head>
<body>
    <!--方式一-->
<!--    <img src="../image/桌面.png" id="images" οnclick="fun()">-->
    <!--方式二-->
    <img src="../image/桌面.png" id="images">


    <script !src="">
        // 方式一
        function fun() {
            alert("我被点击了");
        }
        // 方式二
        function fun2() {
            alert("第二种");
        }

        var click =document.getElementById("images");
        click.onclick = fun2;
    </script>
</body>
</html>

案例:

点击图片后切换图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换</title>
</head>
<body>

    <img id="images" src="../image/桌面.png" alt="">

<script !src="">
    var images = document.getElementById("images");
    var flag = false;
    function f() {
        // alert(images.src);
        if(flag){
            images.src="../image/锁屏.jpg";
            flag=false;
        }else{
            images.src="../image/桌面.png";
            flag=true;
        }
    }
    images.onclick=f;
</script>

</body>
</html>

BOM

1.概念:Browser Object Model浏览器对象模型
	*将浏览器的各个部分封装成对象
	
2. 组成
	*windows:窗口对象
	*navigator:浏览器对象
	*Screen:显示器屏幕对象
	*History:历史记录对象
	*Location:地址栏对象
	
3.windows:窗口对象
	            1.创建
        2.方法
            (1).与弹出框有关的方法
                alert() 显示一段消息和一个确认按钮的警告框
                confirm() 显示带有一段效益以及确认按钮和取消按钮的对话框
                    *点击确定返回true 点击取消返回false
                prompt() 显示可提示用户输入的对话框
                    *返回值是用户输入的信息
            (2).与打开关闭有关的方法
                close()
                    *谁调用我,我关闭谁
                open()
                    *打开一个新窗口
                    *返回一个window对象
            (3).与定时器有关的方法
                setTimeout() 在指定的毫秒数后调用函数或计算表达式
                    *第一个参数js代码或者方法对象
                    *第二个参数 毫秒值
                    *返回一个编号,用户取消定时器
                ClearTimeout() 取消由setTimeout()方法设置的timeout
                setInterval() 按照指定的周期(以毫秒)来调用函数或计算表达式
                ClearInterval() 取消由setInterval() 设置的timeout
        3.属性
            1.获取其他BOM对象
                history
                location
                Navigator
                Screen
            2.获取DOM对象
                document
        4.特点
            *window不需要创建,可以直接使用window使用,window.方法名()
            也可以直接写方法名
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window对象</title>

</head>
<body>

<input type="button" value="打开窗口" id="opens">
<input type="button" value="关闭窗口" id="closes">

<script !src="">

    //弹出窗口有关的
    // alert("hello b");
    //
    // var flag= confirm("是否确定");
    // if(flag){
    //     alert("点击确定");
    // }else {
    //     alert("点击取消");
    // }
    //
    // var result= prompt("请输入用户名");
    // alert(result);

    //打开关闭有关的
    // var opens=document.getElementById("opens");
    // var newwindow;
    // opens.οnclick=function () {
    //     newwindow=open("https://www.baidu.com/");
    // }
    // var closes=document.getElementById("closes");
    // closes.οnclick=function () {
    //     newwindow.close();
    // }

    //与定时器相关的方法
    //一次性定时器
    // var ids= setTimeout(f1,2000);
    // clearTimeout(ids);
    //循环定时器
    // var id2= setInterval(f1,2000);
    // clearInterval(id2);
    // function f1() {
    //     alert("boom");
    // }

    //获取history
    var h1=history;
    // 或者
    var h2=window.history;
    alert(h1);
</script>

</body>
</html>
	4.Location:地址栏对象
		1.创建(获取)
			1.使用window.location或者location
		2.方法:
			*reload()重新加载当前文档。刷新
			*
		3.属性
			*href 设置或者返回完整的url
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location对象</title>

</head>
<body>
    <input id="btn" type="button" value="刷新">
    <input id="gotos" type="button" value="去百度">
    <script !src="">
        //reload方法,定义按钮,点击按钮刷新页面
        var btn=document.getElementById("btn");
        btn.onclick=function () {
            location.reload();
        }

        //获取url
        var urls=location.href;
        alert(urls);

        var btn2=document.getElementById("gotos");
        btn2.onclick=function () {
            location.href="http://www.baidu.com";
        }
    </script>
</body>
</html>
	5.历史记录对象
		1.创建(获取)
			history
		2.方法:
			*back() 加载history列表第一个url
			*forward()加载history列表的下一个url
			*go(参数)加载history列表的某个具体的url
				*参数:
					*正数:前进几个历史纪录
					*负数:后退几个历史纪录
		3.属性:
			*length 返回当前窗口历史列表的url数量

DOM

*概念:Document Object Model文档对象模型
	*将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语营文档进行CRUD的动态操作
	*W3C DOM 标准被分为三个不同部分
		*核心 DOM - 针对任何结构化文档的标准模型
			*Document:文档对象
				1.创建(获取)
					window.document或者document
				2.方法:
					1.获取Element对象:
						*getElementById()根据id获取元素对象
						*getElementByTagName()根据元素名称获取对象,返回值是一个数组
						*getElementByClassName()根据Class属性值获取元素对象,返回值是一个数组
						*getElementByName()根据name获取对象,返回值是数组
					2. 创建其他Dom对象
						*createAttribute(name)
						*createComment()
						*createElement(0
						*createTextNode()
			*Element:元素对象
				1.获取/创建:document来获取
				2.方法:
					*removeAttribute():删除属性
					*setAttribute():设置属性
					
			*Attribute:属性对象
			*Test:文本对象
			*Comment:注释对象
			
			*Node:节点对象(其他五个的父对象)
				*特点:所有的dom对象都可以被认为是一个节点
				*方法:
					*CRUD dom树
						*appendChild():向节点的子节点列表的结尾添加新的子节点
						*removeChild():删除(并返回)当前节点的指定子节点
						*replaceChild():用新的节点替换一个子节点
		*XML DOM - 针对XML文档的标准模型
		*HTML DOM - 针对html文档的标准模型

动态表格案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin:50px;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="id" placeholder="请输入编号">
        <input type="text" id="name" placeholder="请输入姓名">
        <input type="text" id="sex" placeholder="请输入性别">
        <input type="button" value="添加" id="btn_add">
    </div>
    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>aaa</td>
            <td></td>
            <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>bbb</td>
            <td></td>
            <td><a href="javascript:void(0)"onclick="delTr(this)">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>ccc</td>
            <td></td>
            <td><a href="javascript:void(0)"onclick="delTr(this)">删除</a></td>
        </tr>
    </table>
    <script !src="">
        /*
        添加:
            给添加按钮绑定事件
            获取文本框内容
            创建tr,td,设置td的文本为文本框内容
            创建tr
            将td添加到tr中
            获取table,将tr添加到table
        删除:
            确定点的是哪一个超链接
            如何删除
                removeChile():通过父节点删除子节点
         */
        //获取按钮
        document.getElementById("btn_add").onclick=function () {
            //获取文本框
            var id= document.getElementById("id").value;
            var name= document.getElementById("name").value;
            var sex= document.getElementById("sex").value;
            //创建td
            var td_id = document.createElement("td");
            var test_id=document.createTextNode(id);
            td_id.appendChild(test_id);
            //创建td
            var test_name=document.createTextNode(name);
            var td_name = document.createElement("td");
            td_name.appendChild(test_name);
            //创建td
            var test_sex=document.createTextNode(sex);
            var td_sex = document.createElement("td");
            td_sex.appendChild(test_sex);

            //a标签的td
            var ele_a=document.createElement("a");
            var td_a=document.createElement("td");
            ele_a.setAttribute("href","javascript:void(0)");
            ele_a.setAttribute("onclick","delTr(this)");
            var text_a= document.createTextNode("删除");
            ele_a.appendChild(text_a);
            td_a.appendChild(ele_a);

            //创建tr
            var tr=document.createElement("tr");
            tr.appendChild(td_id);
            tr.appendChild(td_name);
            tr.appendChild(td_sex);
            tr.appendChild(td_a)
            //将td添加到table
            var table=document.getElementsByTagName("table")[0];
            table.appendChild(tr);
        }

        //删除方法
        function delTr(obj) {
            alert(obj);
            //获取table标签
            var table=obj.parentNode.parentNode.parentNode;
            var tr=obj.parentNode.parentNode;
            table.removeChild(tr);
        }
    </script>
</body>
</html>

l另一种写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin:50px;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="id" placeholder="请输入编号">
        <input type="text" id="name" placeholder="请输入姓名">
        <input type="text" id="sex" placeholder="请输入性别">
        <input type="button" value="添加" id="btn_add">
    </div>
    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>aaa</td>
            <td></td>
            <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>bbb</td>
            <td></td>
            <td><a href="javascript:void(0)"onclick="delTr(this)">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>ccc</td>
            <td></td>
            <td><a href="javascript:void(0)"onclick="delTr(this)">删除</a></td>
        </tr>
    </table>
    <script !src="">
        document.getElementById("btn_add").onclick=function () {
            var id=document.getElementById("id").value;
            var name=document.getElementById("name").value;
            var sex=document.getElementById("sex").value;
            //获取table
            var table= document.getElementsByTagName("table")[0];
            table.innerHTML+="<tr>\n" +
                "            <td>"+id+"</td>\n" +
                "            <td>"+name+"</td>\n" +
                "            <td>"+sex+"</td>\n" +
                "            <td><a href=\"javascript:void(0)\"οnclick=\"delTr(this)\">删除</a></td>\n" +
                "        </tr>";
        }
        //删除方法
        function delTr(obj) {
            alert(obj);
            //获取table标签
            var table=obj.parentNode.parentNode.parentNode;
            var tr=obj.parentNode.parentNode;
            table.removeChild(tr);
        }
    </script>
</body>
</html>

HTML DOM

1.标签体的设置何获取:innerHTML
2.使用html元素对象的属性
3.设置元素的样式
	1.使用元素的style属性来设置
		如:var div1=document.getElementById("div1");
		        div1.onclick=function (ev) {
		            //设置样式
		            div1.style.border="1px solid red";
		            //font-size应该写成fontsize
		            div1.style.fontSize="20px";
		        }
	2.提前定义好类选择器样式,通过className设置style
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制样式</title>
    <style>
        .d1{
            border:1px solid red;
            width: 100px;
            height: 100px;
        }
        .d2{
            border:1px solid blue;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="div1">
        di1
    </div>
    <div id="div2">
        div2
    </div>
    <script !src="">
        //方式一
        var div1=document.getElementById("div1");
        div1.onclick=function (ev) {
            //设置样式
            div1.style.border="1px solid red";
            //font-size应该写成fontsize
            div1.style.fontSize="20px";
        }
        //方式二
        var div2=document.getElementById("div2");
        div2.onclick=function (ev) {
            div2.className="d1";
        }
    </script>
</body>
</html>

事件

*概念:某些组建被执行了某些操作,出发某些代码的执行
	*事件:某些操作,如 单击,双击,键盘按下。鼠标移动
	*事件源:组件,如 按钮,文本输入框
	*监听器:代码
	*注册监听:将事件,事件源,监听器绑定在在一起。当事件源上发生了事件,则触发监听器代码
*常见的事件
	1.点击事件:
		onclick:单击事件
		ondblclick:双击事件
	2.焦点事件
		onblur:失去焦点
		onfocus:元素获得焦点
	3.加载事件
		onload:加载事件
	4.鼠标事件
		1.onmousedown :鼠标按钮被按下
			*定义方法是接受一个event对象
			*event的button属性可以获取鼠标的哪个按键被点击
		2.onmouseup	  :鼠标按键被松开
		3.onmousemove :鼠标被移动
		4.onmouseover :鼠标移动到了某元素上
		5.onmouseout  :鼠标从某元素移开
	5.键盘事件
		1.onkeydown :某个按键被按下
		2.onkeyup   :某个按键被松开
		3.onkeypress:某个按键按下并松开
	6.选择和改变
		1.onchange :域的内容被改变
		2.onselect :文本被选中
	7.表单事件
		1.onsubmit :提交按钮被单击
			*如果返回false则表单阻止提交。否则提交表单
		2.onreset  :重置按钮被单击
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
    <script !src="">
        /*
        1.点击事件:
			onclick:单击事件
            ondblclick:双击事件
        2.焦点事件
            onblur:失去焦点
            onfocus:元素获得焦点
        3.加载事件
            onload:加载事件
        4.鼠标事件
            1.onmousedown :鼠标按钮被按下
            2.onmouseup	  :鼠标按键被松开
            3.onmousemove :鼠标被移动
            4.onmouseover :鼠标移动到了某元素上
            5.onmouseout  :鼠标从某元素移开
        5.键盘事件
            1.onkeydown :某个按键被按下
            2.onkeyup   :某个按键被松开
            3.onkeypress:某个按键按下并松开
        6.选择和改变
            1.onchange :域的内容被改变
            2.onselect :文本被选中
        7.表单事件
            1.onsubmit :确认按钮被单击
            2.onreset  :重置按钮被单击
        */

        //加载完成事件
        window.onload=function (ev) {
            //失去焦点事件
            // document.getElementById("username").οnblur=function () {
            //     alert("失去焦点");
            // }

            // //鼠标移动到元素上事件
            // document.getElementById("username").οnmοuseοver=function (ev1) {
            //     alert("鼠标来了");
            // }

            //鼠标点击事件
            // document.getElementById("username").οnmοusedοwn=function (ev1) {
            //     //输出哪个鼠标按钮被按下,左键0,右键2,滚轮1
            //     alert(ev1.button);
            // }

            //键盘事件
            // document.getElementById("username").οnkeydοwn=function (ev1) {
            //         //输出哪个按键
            //         alert(ev1.keyCode);
            // }

            //change事件
            // document.getElementById("city").οnchange=function (ev1) {
            //     //输出哪个按键
            //     alert("内容改变")
            // }

            //表单事件
            document.getElementById("form").onsubmit=function (ev1) {
                //如果返回true或者没有返回值则提交表单,如果返回false则不提交
                return false;
            }
        }
    </script>

</head>
<body>
    <form action="" id="form">
        <input type="text" id="username">
        <select name="" id="city">
            <option>北京</option>
            <option>上海</option>
            <option>深圳</option>
        </select>
        <input type="submit" value="提交">
    </form>
</body>
</html>
案例,表格选择,全选,全不选,反选
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格选择</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }
        .out{
            background-color: white;
        }
        .over{
            background-color: hotpink;
        }
    </style>
    <script !src="">
        /*
            全选功能:
                *获取所有checkbox
                *便利checkbos,设置每一个为选中 check

        * */
        window.onload=function (ev) {
            //给全选按钮绑定单击事件
            document.getElementById("selectAll").onclick=function (ev1) {
                //获取所有checkbox
                var cbs=document.getElementsByName("cb");
                for(var i=0;i<cbs.length;i++){
                    cbs[i].checked=true;
                }
            }

            //全不选按钮
            document.getElementById("removeAll").onclick=function (ev1) {
                //获取所有checkbox
                var cbs=document.getElementsByName("cb");
                for(var i=0;i<cbs.length;i++){
                    cbs[i].checked=false;
                }
            }

            //反选
            document.getElementById("change").onclick=function (ev1) {
                //获取所有checkbox
                var cbs=document.getElementsByName("cb");
                for(var i=0;i<cbs.length;i++){
                    cbs[i].checked=!cbs[i].checked;
                }
            }

            //标题栏的checkbox
            document.getElementById("fcb").onclick=function (ev1) {
                var cbs=document.getElementsByName("cb");
                for(var i=0;i<cbs.length;i++)
                    cbs[i].checked=this.checked;
            }

            //给所有tr鼠标移到事件和移出事件,改变颜色
            var trs= document.getElementsByTagName("tr");
            for(var i=0;i<trs.length;i++){
                //移动到元素之上
                trs[i].onmouseover=function (ev1) {
                    this.className="over";
                }
                //移动出元素
                trs[i].onmouseout=function (ev1) {
                    this.className="out";
                }
            }
        }
    </script>
</head>
<body>
    <table>
        <caption>学生信息表</caption>
        <tr>
            <td><input type="checkbox" id="fcb"></td>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td><a href="javascript:void(0)">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox"name="cb"></td>
            <td>1</td>
            <td>张三</td>
            <td></td>
            <td><a href="javascript:void(0)">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb"></td>
            <td>2</td>
            <td>李四</td>
            <td></td>
            <td><a href="javascript:void(0)">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb"></td>
            <td>3</td>
            <td>王五</td>
            <td></td>
            <td><a href="javascript:void(0)">删除</a></td>
        </tr>

    </table>
    <div>
        <input type="button" value="全选" id="selectAll">
        <input type="button" value="全不选" id="removeAll">
        <input type="button" value="反选" id="change">
    </div>
</body>
</html>
案例 表单动态验证
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">cs
    <title>表单验证</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
            body{
            background: url("../image/桌面.png");
        }
        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            /*让div剧中*/
            margin: auto;
            margin-top: 150px;
            opacity: 0.8;
        }
        .rg_left{
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }

        .rg_left > p:first-child{
            color: #FFD026;
            font-size: 20px;

        }
        .rg_left > p:last-child{
            font-size: 20px;
            color: #A6A6A6;
        }

        .rg_center{
            float: left;
            /*border: 1px solid red;*/
            width: 540px;
        }
        .rg_right{
            float: right;
            /*border: 1px solid red;*/
            margin: 15px;
        }
        .rg_right >p:first-child{
            font-size: 15px;
        }
        .rg_right p a{
            color: deeppink;
        }
        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px;
        }
        #username , #password , #email , #name , #tel ,#brith{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            /*设置边框圆角*/
            border-radius: 5px;
            padding-left: 15px;
        }
        #ma{
            width: 110px;
            height: 32px;
            border: 1px solid #A6A6A6;
            /*设置边框圆角*/
            border-radius: 5px;
            padding-left: 15px;
        }
        #img_check{
            height: 32px;
            vertical-align: middle;
        }
        #btn_sub{
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026 ;
        }
        .error{
            color: red;
        }
    </style>
    <script !src="">
        /*
            1.给表单绑定onsubmit事件,监听器中整合判断每一个方法校验的结果
                如果都为true,则监听器方法返回true,如果有一个为false,则返回false
            2.定义一些方法分别校验各个表单项
            3.给各个表单绑定onblur事件
         */
        window.onload=function (ev) {
            document.getElementById("form").onsubmit=function (ev1) {
                //判断每一个方法,用户名校验方法,密码校验方法。。。。
                return checkUsername();
            }
            
            //给input输入框绑定失去焦点的事件
            //失去焦点校验用户名
            document.getElementById("username").onblur=function (ev) {
                checkUsername();
             }
             //失去焦点校验密码
            document.getElementById("password").onblur=function (ev1) {
                checkPassword();
            }
            
        }
        //校验用户名
        function checkUsername() {
            var username=document.getElementById("username").value;
            //6-12位正则
            var reg_username=/^\w{6,12}$/;
            var flag=reg_username.test(username);
            var s_username=document.getElementById("s_username");
            if (flag) {
                 s_username.innerHTML="<img width='35px' height='20px' src='../image/对号.png'>"
            }else{
                s_username.innerHTML="格式有误";
            }
            return flag;
        }
        //校验密码
        function checkPassword() {
            var password=document.getElementById("password").value;
            var reg_password=/^\w{6,12}$/;
            var s_password=document.getElementById("s_password");
            var flag=reg_password.test(password)
            if (flag){
                s_password.innerHTML="<img width='35px' height='20px' src='../image/对号.png'>";
            } else{
                s_password.innerHTML="格式有误";
            }
            return flag;
        }
    </script>
</head>
<body>

    <div class="rg_layout">
        <div class="rg_left">
            <p class="p_reg">新用户注册</p>
            <p>USER REGISTER</p>
        </div>

        <div class="rg_center">
            <div class="rg_form">
                <form action="#" method="post" id="form">
                    <table>
                        <tr>
                            <td class="td_left"><label for="username">用户名</label></td>
                            <td class="td_right">
                                <input type="text" name="username" id="username" placeholder="请输入用户名">
                                <span id="s_username" class="error"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="password">密码</label></td>
                            <td class="td_right">
                                <input type="password" name="userpass" id="password" placeholder="请输入密码">
                                <span id="s_password" class="error"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="email">Email</label></td>
                            <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="name">姓名</label></td>
                            <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="tel">手机号</label></td>
                            <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="sex">性别</label></td>
                            <td class="td_right"><input type="radio" name="sex" id="sex" value="man"><input type="radio" name="sex" id="sex" value="woman"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="brith">出生日期</label></td>
                            <td class="td_right"><input type="date" name="brith" id="brith"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="ma">验证码</label></td>
                            <td class="td_right"><input type="text" name="ma" id="ma" placeholder="输入验证码"><img id="img_check" src="验证码.jpg" alt="" width="100px" height="20px"></td>

                        </tr>
                        <tr><td colspan="2" align="center"><input id="btn_sub" type="submit" value="提交"></td></tr>
                    </table>
                </form>
            </div>
        </div>

        <div class="rg_right">
            <P>已有账号?<a href="#">立即登陆</a></P>
        </div>
    </div>

</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值