• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实例-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实例
实例4-1 email类型的<input>元素的使用

实例4-1 email类型的<input>元素的使用

1.功能描述

在新创建的页面表单中加人一个“email”类型的<input>元素,用于输入邮件地址;另外,新建一个表单提交按钮,当单击“提交”按钮时,将自动检测“email”类型的文本框中输入的字符是否符合邮件格式,如果不符,则显示错误提示信息。

2.实现代码

在Dreamweaver CS5中新建一个HTML页面4-l.html,加入代码如代码清单4-1所示。

代码清单4-1 email类型的<input>元素的使用

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>email类型的input元素</title>
	<link href="Css/css4.css" rel=Mstylesheet" type="text/css">
	</head>
	<body>
	<form id="frmTmp">
	  <fieldset>
	    <legend>请输入由P件地址:</legend>
	    <input name="txtEmail" type="email"
	          class="inputtxt" multiple="true">
	    <input name="frmSubmit" type="submit" 
	          class="inputbtn" value="提交">
	</fieldset>
	</form>
	</body>
	</html>

在代码清单4-1中,通过调用一个样式文件css4.css实现页面样式的控制,其实现的代码如下所示:

	@charset "utf-8";
	/* CSS Document */
	body{
	    font-size:12px
	}
	.inputbtn{
	   border:solid lpx #ccc;
	   background-color:#eee;
	   line-height:18px;
	   font-size:12px
	}
	.inputtxt{
	   border:solid lpx #ccc;
	   line-height:18px;
	   font-size:12px;
	   width:180px
	}
	fieldset{
	   padding:1Opx;
	   width:260px
	} 

3.页面效果

该页面在不同浏览器中执行的页面效果如图4-1所示。

图4-1 email类型的<input>元素在不同浏览器中的页面效果

4.源码分析

如代码清单4-1加黑部分所示,由于将<input>元素“multiple”的属性值设置为“true”,因此,在Chrome 10浏览器中,单击“提交”按钮时,显示的提示信息为“请输入用逗号分隔的电子邮件地址的列表”;而如果不设置该属性值时,则提示信息为“请输入电子邮件地址”。

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101