1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>第三个页面</title>
  6.         <style>
  7.             textarea:required{
  8.                 background-color: lightyellow;
  9.             }
  10.             body{
  11.                 font-family: "微软雅黑";
  12.                 max-width: :600px;
  13.                 padding: 0px 30px;
  14.             }
  15.             h1{
  16.                 margin-top: 0px;
  17.             }
  18.             p{
  19.                 margin-top: 0px;
  20.             }
  21.             fieldset{
  22.                 margin-bottom: 15px;
  23.                 padding: 10px;
  24.             }
  25.             legend{
  26.                 padding: 0px 3px;
  27.                 font-weight: bold;
  28.                 font-variant: small-caps;
  29.             }
  30.             label{
  31.                 width: 110px;
  32.                 display: inline-block;
  33.                 vertical-align: top;
  34.                 margin: 6px;
  35.             }
  36.             em{
  37.                 font-weight:bold ;
  38.                 font-style: normal;
  39.                 color: blue;
  40.             }
  41.             input:focus{
  42.                 background: #FFFFE0;
  43.             }
  44.             input,textarea{
  45.                 width: 250px;
  46.             }
  47.             textarea{
  48.                 height: 10;
  49.             }
  50.             input [type=checkbox]{
  51.                 width: 10px;
  52.             }
  53.             input [type=radio]{
  54.                 width: 10px;
  55.             }
  56.             input [type=submit]{
  57.                 width: 150px;
  58.                 padding: 10px;
  59.             }
  60.         </style>
  61.         <script type="text/javascript" language="JavaScript">
  62.             function validataCom(input){
  63.                 if(input.value.length < 20){
  64.                     input.setCustomValidity("请您再输入一些信息");
  65.                 }else{
  66.                     input.setCustomValidity("");
  67.                 }
  68.             }
  69.             function mySubmit()
  70.             {
  71.                 var resultvalue = getValue();
  72.                 localStorage.setItem("001",resultvalue);
  73.                 var str = localStorage.getItem("001");
  74.                 var result = str.split(",");
  75.                 for(var i = 0; i < result.length; i++)
  76.                    alert(result[i]);
  77.             }
  78.             function getValue()
  79.             {
  80.                 var user = $("name").value;
  81.                 var tel = $("tel").value;
  82.                 var email = $("email").value;
  83.                 var birthday = $("birthday").value;
  84.                 var age = $("age").value;
  85.                 var rm_w = $("rm").checked?"男":"女";
  86.                 var conts = $("conments").value;
  87.                 var c1 = $("c1").checked?"斑马":"";
  88.                 var c2 = $("c2").checked?"老虎":"";
  89.                 var c3 = $("c3").checked?"狮子":"";
  90.                 var c4 = $("c4").checked?"大象":"";
  91.                 var totalValue = user+","
  92.                                 +tel+","
  93.                                 +email+","
  94.                                 +birthday+","
  95.                                 +age+","
  96.                                 +rm_w+","
  97.                                 +conts+","
  98.                                 +c1+","
  99.                                 +c2+","
  100.                                 +c3+","
  101.                                 +c4;
  102.                 return totalValue;
  103.             }
  104.             function $(name)
  105.             {
  106.                 return document.getElementById(name);
  107.             }
  108.         </script>
  109.     </head>
  110.     <body>
  111.         <h1>个人信息</h1>
  112.         <form action="" onsubmit="mySubmit()" method="post">
  113.             <p></p>
  114.             <fieldset>
  115.                 <legend>Contact Details</legend>
  116.                 <label>姓名</label><em>*</em><!--显示文本不可编辑-->&nbsp;
  117.                 <input id="name" type="text" value="" placeholder="请输入姓名"
  118.                     required="required" autofocus="autofocus" /><br/>
  119.                 <label>Tel&nbsp;&nbsp;</label>
  120.                 <input id="tel" type="tel"" value="" placeholder="请输入电话" /><br/>
  121.                 <label>邮箱&nbsp;</label>
  122.                 <input id="email" type="email" required="required" value="" placeholder="请输入邮件地址">
  123.             </fieldset>
  124.             <fieldset>
  125.             <legend>Personal Information</legend>
  126.             <label>生日&nbsp;&nbsp;</label>
  127.             <input id="birthday" type="date" required="required" /><br/>
  128.             <label>年龄&nbsp;&nbsp;</label>
  129.             <input id="age" type="number" min="1" max="120" step="1" required="required" /><br/>
  130.             <label>性别&nbsp;&nbsp;</label>
  131.             <input id="rm" type="radio" name="gender" value="男"/>男
  132.             <input id="rw" type="radio" name="gender" value="女"/>女
  133.             <!--<select id="sex">
  134.                 <option>---请选择性别---</option>
  135.                 <option value="male">-------男-------</option>
  136.                 <option value="female">-------女-------</option>
  137.             </select>-->
  138.             <br/>
  139.             <label>编辑</label><br/>
  140.             <textarea id="conments" rows="8" cols="23" oninput="validataCom(this)" required="required" >
  141.             </textarea>
  142.             </fieldset>
  143.             <fieldset>
  144.                 <legend>请输入您喜欢的动物</legend>
  145.                 <input id="c1" type="checkbox" /> 斑马
  146.                 <input id="c2" type="checkbox" /> 老虎
  147.                 <input id="c3" type="checkbox" /> 狮子
  148.                 <input id="c4" type="checkbox" /> 大象
  149.             </fieldset>
  150.             <p>
  151.                 <input type="submit" value="提交" />
  152.                 <input type="submit" value="提交" />
  153.             </p>
  154.         </form>
  155.     </body>
  156. </html>

HTML5入门八---缓存控件元素的值的更多相关文章

  1. CPF 入门教程 - 各个控件介绍（八）

    CPF C#跨平台桌面UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) CPF 入门教程 - 绘图(四) CPF 入门 ...

  2. IOS版App的控件元素定位

    前言 Android版App的控件元素可以通过Android studio自带的工具uiautomatorviewer来协助定位! IOS版App的控件元素可以通过Appium来实现(未实现),或ap ...

  3. Webview页面的控件元素定位

    前言 现在有很多App都是Hybrid的,即有原生的页面又有Webview的页面,元素的可以通过uiautomatorviewer工具 进行控件元素的定位,Webview页面的则无法通过此方式定位,而 ...

  4. Android版App的控件元素定位

    前言 如何获取页面上各控件元素,无论是Web自动化还是App自动化,此步骤都是非常关键的! Web页面的控件元素可通过开发者选项(Chrome浏览器的F12)来协助定位,App端也是有相应的工具来协助 ...

  5. Python+Appium自动化测试(10)-TouchAction类与MultiAction类（控件元素的滑动、拖动，九宫格解锁，手势操作等）

    滑动屏幕方法swipe一般用于对页面进行上下左右滑动操作,但自动化过程中还会遇到其他情况,如对控件元素进行滑动.拖拽操作,九宫格解锁,手势操作,地图的放大与缩小等.这些需要针对控件元素的滑动操作,或者 ...

  6. JQuery动态添加控件并取值

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. python通过win32api轻松获取控件的属性值

    1.如何利用句柄操作windows窗体 首先,获得窗体的句柄  win32api.FindWindows() 第二,获得窗体中控件的id号,spy++ 第三,根据控件的ID获得控件的句柄(hwnd)  ...

  8. winform中的dateTimePicker控件设置默认值为空

    winform中的dateTimePicker控件设置默认值为空   第一步:设置Format的属性值为“Custom” 第二步:设置CustomFormat的属性值为空,需要按一个空格键

  9. WPF－学习笔记 动态修改控件Margin的值

    原文:WPF-学习笔记 动态修改控件Margin的值 举例说明:动态添加一个TextBox到Grid中,并设置它的Margin: TextBox text = new TextBox(); t_gri ...

随机推荐

  1. jquery数组之存放checkbox全选值示例代码

    使用jquery数组可以存放checkbox全选值,下面有个不错的示例,感兴趣的朋友可以参考下. 复制代码代码如下: <input type="checkbox" id=&q ...

  2. WordPress 主题开发 - (五)WordPress 主题模板及目录结构 待翻译

    While the most minimal of WordPress Themes really only need an index.php template and a style.css fi ...

  3. Android实现发短信与打电话的功能

    //发短信 class SendMsgClickListener implements OnClickListener { public void onClick(View v) { //调用Andr ...

  4. .NET开发Windows Service程序 - Topshelf

    在实际项目开发过程中,会经常写一些类似定时检查,应用监控的应用.这类应用在windows平台通常都会写成window service程序. 在百度上搜索一下'c#开发windows service', ...

  5. 存储映射IO

    mmap 将文件映射到内存, 对这块内存的修改会自动同步到相应的文件中 void *mmap(void *addr, size_t len, int prot, int flag, int fd, o ...

  6. Antelope 和Barracuda区别

    Antelope是innodb-base的文件格式, Barracude是innodb-plugin后引入的文件格式,同时Barracude也支持Antelope文件格式.两者区别在于: 文件格式 支 ...

  7. 横轴墨卡托 (Transverse Mercator) 投影

    横轴墨卡托 (Transverse Mercator) 投影 描述 此投影又称为高斯-克吕格投影,它与墨卡托投影相似,不同之处在于圆柱是沿经线而非赤道纵向排列.通过这种方法生成的等角投影不会保持真实的 ...

  8. Intel格式和AT&T格式汇编区别

    一.AT&T 格式Linux 汇编语法格式 在 AT&T 汇编格式中,寄存器名要加上 '%' 作为前缀:而在 Intel 汇编格式中,寄存器名不需要加前缀.例如: AT&T 格 ...

  9. OC特有语法：分类category，给NSString增加方法计算字符串中数字的个数

    1:分类的使用场景:想对一个类,扩充一些功能,而又不改变原来类的模型,也不用继承,这时OC中的特有语法:分类可以做到: 当然分类也是一个类,也需要声明和实现,声明在.h文件中,实现在.m文件中,格式如 ...

  10. Careercup - Google面试题 - 4857362737266688

    2014-05-04 00:10 题目链接 原题: Write a function return an integer that satisfies the following conditions ...