html+js实现简单的登陆页面

原文链接: http://www.cnblogs.com/Elaine1/p/10035846.html

初学web自动化,学习简单的前端知识还是很有必要的;

今天我们利用html实现一个简单的登陆页面,并利用js提取用户名和密码,在alert弹窗中显示出来

 

实现的功能:

1.实现重置按钮的功能,点击重置按钮,能清除你填写的数据 

2.填写用户名,密码,点击登录,获取到用户名和密码通过alert提示框展示出来。

 

页面如图:

html+js实现简单的登陆页面_第1张图片

代码如下:

html>
<html>
<head>
<title>登陆.htmltitle>
head>
<body>
<form name="user" action="#" method="get">
<table align="center">
<tr>
<td>用户名td>
<td>
<input type="text" name="username" id="username"/>
td>
tr>
<tr>
<td>密码td>
<td>
<input type="password" name='pwd' id="pwd"/>
td>
tr>
<tr>
<td>性别td>
<td>
<input type="radio" name="name" checked="checked"/>男
<input type="radio" name="name"/>女
td>
tr>
<tr>
<td>头像td>
<td>
<input class="btn-file" type="file" name="file" />
td>
tr>
<tr>
<td>住址td>
<td>
<select>
<option value='广东省' selected="selected">广东option>
<option >北京市option>
<option>山东option>
select>省  
<select>
<option>深圳
市br



爱好

篮球
足球
看书



备注信息

















最终实现的效果如下:

 

 

转载于:https://www.cnblogs.com/Elaine1/p/10035846.html

你可能感兴趣的:(html+js实现简单的登陆页面)