表单是用来获取用户输入的一些数据，最常见的就是注册，登录之类的；
首先，打开IDEA软件，并新建一个工程，建好后，右键创建一个html5文件，完成后便完成了最开始的工作；
接着我们先熟悉一些较常用的表单标签：表单<form>， 输入域<input>，文本域<textarea>，按钮<button>，域的标题<legend>，控制标签<label>等。我们创建一个form,如图，输入一些你想要创建的东西（我演示的仅为用户密码）；
打开网页看效果图，便是这样的效果了，拥有了最简单的帐号密码；
同时，我们还可以添加一些选择的元素，如你喜欢什么游戏；
下面是表单代码，你直接再加属性就可以了，表单用 table 写比较简单，div 太麻烦了；<html xmlns=" http://www.dayinmandarin.com ">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>黑板</title>
</head>
<body>
<div style="width:500px">
<h1 style="width:500pxheight:50pxcolor:#2A8DF0border-bottom:#2A8DF0 solid 3pxtext-align:center">用户注册页面</h1>
<table cellpadding="0" cellspacing="10" style="margin:0 auto">
<tr>
<td align="right" valign="top"><div>用户名：</div></td>
<td><input style='width:250px' value='请输入用户名' /></td>
</tr>
<tr>
<td align="right" valign="top"><div>密 码：</div></td>
<td><input style='width:250px' value='请输入密码' /></td>
</tr>
<tr>
<td align="right" valign="top"><div>确 认：</div></td>
<td><input style='width:250px' value='请再次输入密码' /></td>
</tr>
<tr>
<td align="right" valign="top"><div>姓 名：</div></td>
<td><input style='width:250px' value='请输入真实姓名' /></td>
</tr>
<tr>
<td align="right" valign="top"><div>邮 箱：</div></td>
<td><input style='width:250px' value='请输入电子邮箱' /></td>
</tr>
</table>
<div align="center"><input style="width:100pxheight:30pxtext-align:centerline-height:30pxbackground:#2289F0border:#2289F0color:whitefont-weight:boldfont-size:16px" type="submit" value="提交注册" /></div>
</div>
</body>
</html>
用html5的localStorage方法就可以实现本地存储
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>name<input type="text" /></div>
<div>age<input type="text" /></div>
<div><input type="submit" /></div>
<script>
document.getElementsByTagName("input")[2].onclick = function () {
var _name = document.getElementsByTagName("input")[0].value
var _age = document.getElementsByTagName("input")[1].value
localStorage.setItem("name", _name)
localStorage.setItem("age", _age)
}
</script>
</body>
</html>
需要配置服务端，本地运行无效
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）