HTML5入门八---缓存控件元素的值
<!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>
HTML5入门八---缓存控件元素的值的更多相关文章
- CPF 入门教程 - 各个控件介绍（八）
CPF C#跨平台桌面UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) CPF 入门教程 - 绘图(四) CPF 入门 ...
- IOS版App的控件元素定位
前言 Android版App的控件元素可以通过Android studio自带的工具uiautomatorviewer来协助定位! IOS版App的控件元素可以通过Appium来实现(未实现),或ap ...
- Webview页面的控件元素定位
前言 现在有很多App都是Hybrid的,即有原生的页面又有Webview的页面,元素的可以通过uiautomatorviewer工具 进行控件元素的定位,Webview页面的则无法通过此方式定位,而 ...
- Android版App的控件元素定位
前言 如何获取页面上各控件元素,无论是Web自动化还是App自动化,此步骤都是非常关键的! Web页面的控件元素可通过开发者选项(Chrome浏览器的F12)来协助定位,App端也是有相应的工具来协助 ...
- Python+Appium自动化测试(10)-TouchAction类与MultiAction类（控件元素的滑动、拖动，九宫格解锁，手势操作等）
滑动屏幕方法swipe一般用于对页面进行上下左右滑动操作,但自动化过程中还会遇到其他情况,如对控件元素进行滑动.拖拽操作,九宫格解锁,手势操作,地图的放大与缩小等.这些需要针对控件元素的滑动操作,或者 ...
- JQuery动态添加控件并取值
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- python通过win32api轻松获取控件的属性值
1.如何利用句柄操作windows窗体 首先,获得窗体的句柄 win32api.FindWindows() 第二,获得窗体中控件的id号,spy++ 第三,根据控件的ID获得控件的句柄(hwnd) ...
- winform中的dateTimePicker控件设置默认值为空
winform中的dateTimePicker控件设置默认值为空 第一步:设置Format的属性值为“Custom” 第二步:设置CustomFormat的属性值为空,需要按一个空格键
- WPF－学习笔记 动态修改控件Margin的值
原文:WPF-学习笔记 动态修改控件Margin的值 举例说明:动态添加一个TextBox到Grid中,并设置它的Margin: TextBox text = new TextBox(); t_gri ...
随机推荐
- ASP 连接 MySQL 数据库两种方法
一般都是用myodbc来连接.首先,在系统中安装 Mysql 的ODBC数据库驱动.如安装稳定版本是3.51.下载地址是:http://dev.mysql.com/downloads/connecto ...
- php 伪静态 (url rewrite mod_rewrite 重写)
mod_rewrite是Apache的一个非常强大的功能,它可以实现伪静态页面.下面我详细说说它的使用方法!对初学者很有用的哦!1.检测Apache是否支持mod_rewrite通过php提供的php ...
- Oracle 10g RAC 启动与关闭
一. 检查共享设备 一般情况下,存放OCR和Voting Disk的OCFS2 或者raw 都是自动启动的. 如果他们没有启动,RAC 肯定是启动不了. 1.1 如果使用ocfs2的 检查ocfs2 ...
- 仅当使用了列列表并且 IDENTITY_INSERT 为 ON 时，才能为表中的标识列指定显式值
今天在处理数据时遇到这样一个错误 消息 8101,级别 16,状态 1,第 1 行 仅当使用了列列表并且 IDENTITY_INSERT 为 ON 时,才能为表'dbo.StockDetailValu ...
- libnuma.so.1()(64bit) is needed by mysql-community-server-5.7.9-1.el6.x86_64
版本:5.7.9 新装的CentOS 6.3 安装MySQL 5.7.9 出现的问题 1.首先卸载系统自带的mysql 5.1的包 yum -y remove mysql-libs-5 ...
- Java 网络编程（转）
一,网络编程中两个主要的问题 一个是如何准确的定位网络上一台或多台主机,另一个就是找到主机后如何可靠高效的进行数据传输. 在TCP/IP协议中IP层主要负责网络主机的定位,数据传输的路由,由IP地址可 ...
- python之量的概念
程序设计语言: 量的类型: 1. 直接量 2. 常量 3. 变量 量的因素: 1. 存储类别 2. 数据类型 3. 作用域 4. 生存期
- Careercup - Facebook面试题 - 4907555595747328
2014-05-02 07:49 题目链接 原题: Given a set of n points (coordinate in 2d plane) within a rectangular spac ...
- 学习Linux第二天
1.Linux目录: 保存系统命令:根目录下的bin和sbin,usr下的bin和sbin /etc:保存配件 /usr:系统软件资源目录 /proc:系统内存分配目录,直接写入内存的 /var:保存 ...
- C#截取文件的文件夹地址
创建文件 if (!File.Exists(file_name)) { File.Create(file_name).Close(); } using System.IO; 如果没有.Close(), ...