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.









Bootstrap框架----标签Tag输入用法--Bootstrap-tagsinput

有时候我们需要这样一种应用场景,让用户输入字符串列表,提交到后台。这个时候我们可以选择标签Tag输入用法--Bootstrap-tagsinput。效果图我们在之前的文章中已经在SpringMVC基础...
  • q383965374
  • q383965374
  • 2017年06月26日 15:46
  • 4678

打造 Bootstrap Tags Input 同 Modal 结合的利器

Boostrap Tags Input 插件基于Bootstrap实现了如:打Tag 和 删除Tag等功能,如:
  • qq_15096707
  • qq_15096707
  • 2016年06月23日 22:10
  • 2040

jQuery tags input 使用

bootstrap中的tagsinput标签的使用
  • star535X
  • star535X
  • 2015年11月12日 19:13
  • 446

网页标签功能插: jQuery tags input 翻译api

看名字应该知道是干嘛用了吧。这种规格标签,因为在写一个后台,用到这种场景,vuejs又没什么可用的,所以这种交互性极强的 ,还是离不开jquery啊。后悔没用react 开发, 结合ant 里面插件都...
  • xllily_11
  • xllily_11
  • 2016年08月18日 15:59
  • 2424

thinkphp整合tagit插件和jquery input tags几个插件比较

1:前言   业务需求,需要【添加文章】的功能,而在此功能中需要【添加标签】功能的实现,之前看过别的网站【添加标签】做的很炫,而且是那种能自己提示的那种。至少不是给一个input框:然后让你以逗号分...
  • jiuyueguang
  • jiuyueguang
  • 2013年07月17日 09:45
  • 3334

bootstrap-tagsinput插件展示关键字

最终效果图(注意用火狐浏览器打开,原因看第4点): 1.下载插件分发包这里下载,到页面后点击Download This Plugin2.引入css和js这个插件支持bootstrap2和bootst...
  • AHAU10
  • AHAU10
  • 2017年02月26日 01:26
  • 2882

HTML5-定制input元素

下述内容主要讲述了《HTML5权威指南》第13章关于“定制input元素”。 input元素可以生成一个供用户输入数据的简单文本框。其缺点在于用户在其中输入什么值都可以,可以配置type类型来获取额外...
  • ligang2585116
  • ligang2585116
  • 2016年08月20日 18:17
  • 2520

(代码记录)bootstrap tagsinput 基本功能DEMO

基本功能包括 1.初始化( 集成了typeahead 及 bundle ) 2.初始化值 tagsinput(‘add’, {xxxx}) 3.获取值 tagsinput(“items”) ...
  • ISaiSai
  • ISaiSai
  • 2016年09月29日 19:31
  • 5183

打造 Bootstrap Tags Input 同 Modal 结合的利器(改)

对上文 打造 Bootstrap Tags Input 同 Modal 结合的利器 中的 js 进行整合,如下: bootstrap-tagsinput-demo.js /** * Create...
  • qq_15096707
  • qq_15096707
  • 2016年06月23日 22:15
  • 1996

tagsinput和typeahead生成标签

bootstrap-tagsinput是一款插件,用于页面tag标签生成。它支持自己手动输入,同时也能在ajax基础上智能填充输入框内容。一般的功能,官网上有介绍。不过对于自动填充这块,需要详细说明一...
  • laiwenqiang
  • laiwenqiang
  • 2017年06月07日 13:44
  • 991
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5-关于如何使用<input>tags~汇总
举报原因:
原因补充:

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