初学web自动化,学习简单的前端知识还是很有必要的;
今天我们利用html实现一个简单的登陆页面,并利用js提取用户名和密码,在alert弹窗中显示出来
实现的功能:
1.实现重置按钮的功能,点击重置按钮,能清除你填写的数据
2.填写用户名,密码,点击登录,获取到用户名和密码通过alert提示框展示出来。
页面如图:
代码如下:
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
爱好
篮球
足球
看书
备注信息