您的位置：首页 > Web前端 > HTML5
HTML5入门八---缓存控件元素的值

2015-12-23 08:47 591 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第三个页面</title>
<style>
textarea:required{
background-color: lightyellow;
}
body{
font-family: "微软雅黑";
max-width: :600px;
padding: 0px 30px;
}
h1{
margin-top: 0px;
}
p{
margin-top: 0px;
}
fieldset{
margin-bottom: 15px;
padding: 10px;
}
legend{
padding: 0px 3px;
font-weight: bold;
font-variant: small-caps;
}
label{
width: 110px;
display: inline-block;
vertical-align: top;
margin: 6px;
}
em{
font-weight:bold ;
font-style: normal;
color: blue;
}
input:focus{
background: #FFFFE0;
}
input,textarea{
width: 250px;
}
textarea{
height: 10;
}
input [type=checkbox]{
width: 10px;
}
input [type=radio]{
width: 10px;
}
input [type=submit]{
width: 150px;
padding: 10px;
}
</style>
<script type="text/javascript" language="JavaScript">
function validataCom(input){
if(input.value.length < 20){
input.setCustomValidity("请您再输入一些信息");
}else{
input.setCustomValidity("");
}
}
function mySubmit()
{
var resultvalue = getValue();
localStorage.setItem("001",resultvalue);
var str = localStorage.getItem("001");
var result = str.split(",");
for(var i = 0; i < result.length; i++)
alert(result[i]);
}
function getValue()
{
var user = $("name").value;
var tel = $("tel").value;
var email = $("email").value;
var birthday = $("birthday").value;
var age = $("age").value;
var rm_w = $("rm").checked?"男":"女";
var conts = $("conments").value;
var c1 = $("c1").checked?"斑马":"";
var c2 = $("c2").checked?"老虎":"";
var c3 = $("c3").checked?"狮子":"";
var c4 = $("c4").checked?"大象":"";
var totalValue = user+","
+tel+","
+email+","
+birthday+","
+age+","
+rm_w+","
+conts+","
+c1+","
+c2+","
+c3+","
+c4;
return totalValue;
}
function $(name)
{
return document.getElementById(name);
}
</script>
</head>
<body>
<h1>个人信息</h1>
<form action="" onsubmit="mySubmit()" method="post">
<p></p>
<fieldset>
<legend>Contact Details</legend>
<label>姓名</label><em>*</em><!--显示文本不可编辑--> 
<input id="name" type="text" value="" placeholder="请输入姓名"
required="required" autofocus="autofocus" /><br/>
<label>Tel  </label>
<input id="tel" type="tel"" value="" placeholder="请输入电话" /><br/>
<label>邮箱 </label>
<input id="email" type="email" required="required" value="" placeholder="请输入邮件地址">
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<label>生日  </label>
<input id="birthday" type="date" required="required" /><br/>
<label>年龄  </label>
<input id="age" type="number" min="1" max="120" step="1" required="required" /><br/>
<label>性别  </label>
<input id="rm" type="radio" name="gender" value="男"/>男
<input id="rw" type="radio" name="gender" value="女"/>女
<!--<select id="sex">
<option>---请选择性别---</option>
<option value="male">-------男-------</option>
<option value="female">-------女-------</option>
</select>-->
<br/>
<label>编辑</label><br/>
<textarea id="conments" rows="8" cols="23" oninput="validataCom(this)" required="required" >
</textarea>
</fieldset>
<fieldset>
<legend>请输入您喜欢的动物</legend>
<input id="c1" type="checkbox" /> 斑马
<input id="c2" type="checkbox" /> 老虎
<input id="c3" type="checkbox" /> 狮子
<input id="c4" type="checkbox" /> 大象
</fieldset>
<p>
<input type="submit" value="提交" />
<input type="submit" value="提交" />
</p>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航