HTML5入门5---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()
{
alert("填写正确");
} </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="提交" />
</p>
</form>
</body>
</html>
HTML5入门5---HTML5控件元素的更多相关文章
- HTML5入门八---缓存控件元素的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 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一般用于对页面进行上下左右滑动操作,但自动化过程中还会遇到其他情况,如对控件元素进行滑动.拖拽操作,九宫格解锁,手势操作,地图的放大与缩小等.这些需要针对控件元素的滑动操作,或者 ...
- HTML5 progress和meter控件
在HTML5中,新增了progress和meter控件.progress控件为进度条控件,可表示任务的进度,如Windows系统中软件的安装.文件的复制等场景的进度.meter控件为计量条控件,表示某 ...
- html5 新增表单控件和表单属性
新的输入型控件 email:电子邮箱文本框,跟普通的没什么区别 当输入不是邮箱的时候,验证通不过 移动端的键盘会有变化 tel:电话号码 一般用于手机端,是一个键盘切换 url:网页的 ...
- html5新增表单控件和表单属性
表单验证 Invalid事件 : 验证反馈 input.addEventListener('invalid',fn,false) 阻止默认验证:ev.preventDefault() formnova ...
- WPF 入门《常用控件》
1.GroupBox 注意: GroupBox仍然需要布局容器来放置元素.如: StackPanel面板 <GroupBox Header="select number?"& ...
随机推荐
- 例题6-8 Tree Uva548
这道题我一直尝试用scanf来进行输入,不过一直没有成功,因此先搁置一下,以后积累些知识再进行尝试. 这道题有两种解决方案: 即先建树,再遍历和边建树边遍历.这两种方案经过实践证实效率相差不太多.应该 ...
- js----对象的创建
js创建对象的三种方法 在介绍之前一定要弄清楚一个概念,比如var a = new Object(); 这里的a并不是一个对象,而是一个对象的实例. 一.用Json创造 var a = {b:1,c: ...
- Linux 如何设置只允许域名访问站点而禁止IP访问站点
最近在论坛里看到有人问到 Linux 如何设置只允许域名访问站点而禁止IP访问站点的问题,之前自己也用过这个功能,可以防止别人用 IP 地址来访问到自己的网站,下面我就我自己的环境给出解决方法,我用的 ...
- Linux大量TIME_WAIT的解决办法
发布:theboy 来源:net [大 中 小] 根据TCP协议定义的3次握手断开连接规定,发起socket主动关闭的一方 socket将进入TIME_WAIT状态,TIME_WAIT状态将持 ...
- 用cookie实现localstorage功能
在项目中需要利用到html5的localstorage.但在利用这个属性的时候却发现无法达到预定目标.经过不断的检查及排除,最后发现原因所在: 项目中使用的浏览器是支持localstorage的,但是 ...
- jQuery取值相加
实在是太菜了. 这样一个需求: 计算两个text中的值的和,引发了对jQuery中类型转换的知识软肋. 在网上找到了才知道:http://zhidao.baidu.com/link?url=ujw88 ...
- PySide 简易教程<三>-------动手写起来
到目前为止,已经接触的Pyside的界面元素有如下几个:QWidget.QPushButton.QLabel.本次再介绍两个tooltip和messagebox.tooltip是一个鼠标悬浮提示信息, ...
- Makefile之wildcard
1.wildcard : 扩展通配符2.notdir : 去除路径3.patsubst :替换通配符 例子:建立一个测试目录,在测试目录下建立一个名为sub的子目录$ mkdir test$ cd t ...
- Spark Standalone运行过程
以下内容参考http://www.cnblogs.com/luogankun/p/3912956.html 一.集群启动过程--启动Master 二.集群启动过程--启动WorkerWorker运行时 ...
- C#TCPClient应用-一个简单的消息发送和接收
TcpSend窗口用于发送消息,另外写一个用于接收消息的应用程序,消息接受到以后,必须要关闭接收消息的窗口,才能在接收新的消息,不知道怎么能解决这个问题. 源代码: 发送消息的窗口代码 using S ...