HTML5-关于如何使用<input>tags~汇总

原创 2013年12月02日 01:31:18
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Popconrn Sales Form(Ajax)</title>
<style type="text/css">
img
{
position:absolute;
left:400px;
top:50px;
}
</style>
<script type="text/javascript" src="popcornA.js"></script>
</head>
<body>
<h2>Welcome to Millenium Gymnastics Booster Club Popcorn Sales</h2>
<form method="get">
<table>
<tr>
<td>Buyer's Name: </td>
<td><input type="text" name="name" size="30"></input></td>
</tr>
<tr>
<td>Street Address: </td>
<td><input type="text" name="street" size="30"></input></td>
</tr>
<tr>
<td>Zip Code: </td>
<td><input type="text" name="zip" size="10" onkeyup="getPlace(this.value)"></input></td>
</tr>
<tr>
<td>City </td>
<td><input type="text" name="city" size="30" id="city"></input></td>
</tr>
<tr>
<td>State</td>
<td><input type="text" name="state" size="30" id="name"></input></td>
</tr>
<tr>
<td>Number</td>
<td><input type="number" name="number" size="30" id="name" value="2"></input></td>
</tr>
<tr>
<td>Search</td>
<td><input type="search" name="term" id="term"></input></td>
</tr>
<tr>
<td>Range</td>
<td><input type="range" min="0" max="1" step="0.01"></input></td>
</tr>
<tr>
<td>Color</td>
<td><input type="color" name="favcolor" ></input></td>
</tr>
<tr>
<td>Date</td>
<td><input type="date" name="eventStart" id="eventstart"></input></td>
</tr>
<tr>
<td>Time</td>
<td><input type="time" name="eventTime" id="eventTime"></input></td>
</tr>
<tr>
<td>Week</td>
<td><input type="week" name="week" id="week"></input></td>
</tr>
<tr>
<td>Month</td>
<td><input type="month" name="month" id="month"></input></td>
</tr>
<tr>
<td>Local DT</td>
<td><input type="datetime-local" name="localDT" id="localDT"></input></td>
</tr>
<tr>
<td>TelPhone</td>
<td><input type="tel" name="phone" id="phone" placeholder="e.g. 000-000-0000" autocomplete="on"
pattern="[0-9]{3}[-][0-9]{3}[-][0-9]{4}" required
title="Please provide your phone number in the following format:000-000-0000"></input>
</td>
</tr>
<tr>
<td>Datalists</td>
<td><input type="text" name="coffee" list="coffees">
<datalist id="coffees">
<option value="Americano"></option>
<option value="Cappuccino"></option>
<option value="Flat White"></option>
<option value="Latte"></option>
</datalist>
</input>
</td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" name="email" id="email" placeholder="e.g. joe@example.com" required></input></td>
</tr>
<tr>
<td>video</td>
<td><video src="girl.rmvb" width="300" height="225" controls poster="py.jpg"></video></td>
</tr>
</table>
<img src="popcorn.jpg" alt="picture of Popcorn" height="550px" ></img>
<p><input type="submit" value="Submit Order"></input>
  <input type="reset" value="Clear Order Form"></input>
</p>
</form>
</body>

</html>



//more tag about media, please check with html 5.









相关文章推荐

使用 HTML5 input 类型提升移动端输入体验(键盘)

转载自: http://blog.163.com/thylx133@126/blog/static/601518752015310101740593/ 在最近的项目中,策划老是要求我们弹出各种类型的键...

HTML5:使用Canvas和Input range控件放大缩小图片

使用了HTML5的两个新标签canvas和input range。 效果图如下,拉动控制杆可以放大缩小图片: 代码: 图片缩放 你的浏览器不支持...

HTML5中的新标签和新事件属性(Tags and Event Attributes)

Defines an article Defines content aside from the page content Defines sound content Isolates ...
  • zanazh
  • zanazh
  • 2012年01月16日 10:45
  • 303

html5-input样式

  • 2015年02月27日 10:55
  • 285KB
  • 下载

html5中input的新类型(验证只有在点击提交按钮的时候才触发)

1.email,关于电子邮件是否合法,我们以前通常会在js脚本中写一个复杂的正则表达式来验证,但是现在不用了,类型为email的input控件可以自动帮助我们完成,用法如下: Docum...

html5的Input Type : Number,分享自己的一些认识!

在HTML5中,可以有许多输入字段作为一个微调器你向上和向下箭头在右边的文本框增加或减少数量的值。请看下面的spinner gallery作为案例。 写作,web浏览器,在Windows是G...

HTML5基础(三)——input表单

一、新增表单类型 1、search:它看起来是一个文本输入框,可以输入一行普通的文本,可以把它看成一个搜索框。 2、email:它看起来是一个文本输入框,可以输入一个电子邮件地址,在移动设备上有额外的...

HTML5中新增的input类型及其属性

HTML5中新增的input类型及其属性HTML4.01中,input的类型只有text、button、password、submit、radio、checkbox和hidden(隐藏域)。H5中新增...

jquery左键拖动选值,类似html5的input[range]

最近项目要做一个类似于html5里的Input[range]滑动选值的效果,如图,原理很简单,拖动时目标随鼠标位置变化,不过中间也遇到了一个问题,在chrome下没问题,在FF和IE下,只有右键能很好...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5-关于如何使用<input>tags~汇总
举报原因:
原因补充:

(最多只允许输入30个字)