今天学了H5新增的表单属性，知道如何用新增的那些属性（如form、placeholder）制作一个建议的登陆界面。界面如下：
源代码如下：
<html>
<head>
<head>
<body>
<form method="post">
用户名：<input type="text" name="name" placeholder="请输入用户名" list="names" autofocus autocomplete><br/></br>
密码:<input type="password" name="name" placeholder="请输入密码"></br></br>
<input type="submit" value="登录" formaction="regist"/>
<input type="submit" value="忘记秘密" formaction="login"/>
</form>
<datalist id="names">
<option value="yongshengdadi">yongshengdadi</option>
<option value="mingzi">mingzi</option>
<option value="zhanghao">zhanghao</option>
</body>
</html>
首先，在form中用input写一个文本框。关键代码如下：
<form method="post">
用户名：<input type="text" name="name" ><br/></br>
</form>网页效果如下：
再用同样的方法，写一个密码的文本框。
密码:<input type="password" name="name" ></br>（注：type设置为“password”，在文本框输入数据的时候会自动隐藏，变成到这不可见的密码）
效果如下：
然后再添加两个按钮，分别为“登录”“忘记密码”，关键代码如下：
<input type="submit" value="登录" formaction="regist"/>
<input type="submit" value="忘记秘密" formaction="login"/>（注，input type需要设置为submit，而formation属性则是用于动态地提交表单给URL）
到这里登录界面大致就完成了，但是和一般的登陆界面比较一下还是缺少点东西。可以通过autofocus使第一个文本框自动获得焦点。即在input中写入一个autofocus即可。此外，一般的登陆界面文本框都有提示语，因此可以用placeholder为文本框加入提示语。
用户名：<input type="text" name="name" placeholder="请输入用户名" list="names" autofocus><br/></br>
密码:<input type="password" name="name" placeholder="请输入密码"></br></br>效果如下：
除此之外，一般的登陆界面在登录界面的时候，如果是常登录用户，在输入用户名的时候会自动出现登录过的用户。这个功能可以通过list和autocomplete出现。关键代码如下：
用户名：<input type="text" name="name" placeholder="请输入用户名" list="names" autofocus><br/></br>
密码:<input type="password" name="name" placeholder="请输入密码"></br></br>
<input type="submit" value="登录" formaction="regist"/>
<input type="submit" value="忘记秘密" formaction="login"/>
</form>
<datalist id="names">
<option value="yongshengdadi">yongshengdadi</option>
<option value="mingzi">mingzi</option>
<option value="zhanghao">zhanghao</option>测试效果如下：
以上就是简易登录界面的制作方法。如果大家有更好的优化建议，欢迎大家留言评论呀。
698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
