html5 展示excel附件 h5 form表单

一、智能表单
required: required 内容不能为空
placeholder: 表单提示信息
autofocus:自动聚焦
pattern: 正则表达式 输入的内容必须匹配到指定正则范围
autocomplete:是否保存用户输入值
默认为on，关闭提示选择off
formaction: 在submit里定义提交地址
datalist: 输入框选择列表配合list使用 list值为datalist的id值
output: 计算或脚本输出

一、要实现不再form表单内实现 input 表单的方法

<form><input  artion="#" method="post" id="aaa"></form>    在form内定义id
   <input type="email" form="aa">                                           然后在外面的input 里连接一个form属性与上面的id一样就可以

input表单type属性值：
type = “email” 限制用户输入必须为Email类型
type=“url” 限制用户输入必须为URL类型
type=“date” 限制用户输入必须为日期类型
type=“datetime” 显示完整日期 含时区 实际上输入啥都行
type=“datetime-local” 显示完整日期 不含时区
type=“time” 限制用户输入必须为时间类型
type=“month” 限制用户输入必须为月类型
type=“week” 限制用户输入必须为周类型
type=“number” 限制用户输入必须为数字类型
type=“range” 生成一个滑动条
type=“search” 具有搜索意义的表单results="n"属性
type=“color” 生成一个颜色选择表单
type=“tel” 显示电话号码
以下为上面各type的展示效果
1、type = “email” ：限制用户输入必须为Email类型

2、type=“url” 限制用户输入必须为URL类型

3、

type=“date” 限制用户输入必须为日期类型

type=“datetime” 显示完整日期 含时区 实际上输入啥都行

type=“datetime-local” 显示完整日期 不含时区

type=“time” 限制用户输入必须为时间类型

type=“month” 限制用户输入必须为月类型

type=“week” 限制用户输入必须为周类型

type=“number” 限制用户输入必须为数字类型

type=“range” 生成一个滑动条

4、type=“range” 生成一个滑动条

滑动条

<input type="range" form="reg" value="8" min="0" max="10" step="2"></br>  // step代表value的变化每次是 2

5、

type=“color” 生成一个颜色选择表单

type=“tel” 显示电话号码

二、

required: required 内容不能为空

placeholder: 表单提示信息

autofocus:自动聚焦,使文本框上的焦点一直存在

如：

<form action="http://www.baidu.com" method="post">
		用户名：<input type="text" placeholder="请输入用户名" required autofocus>
		密码：<input type="password" placeholder="请输入用密码" required>
		<input type="submit">

2、pattern: 正则表达式 输入的内容必须匹配到指定正则范围

用法：

用户名：<input type="text" placeholder="请输入用户名" pattern="\d{1,5}">
	          <label>请输入1-5之间的数字</label></br>

3、autocomplete:是否保存用户输入值
默认为on，关闭提示选择off
如：正常情况下，我们写用户名会自动保存下来,用过的用户名会保留下来

用户名：<input type="text" name="user" placeholder="请输入用户名" required >

关掉方法：

用户名：<input type="text" name="user" placeholder="请输入用户名" required autocomplete="off">

4、formaction: 在submit里定义提交地址，定义另一个提交地址
如:

<form method="get" action="http://www.baidu.com">
		用户名：<input type="text" name="user" placeholder="请输入用户名" required autocomplete="off">
		密码：<input type="password" placeholder="请输入用密码" required>
		<input type="submit" value="提交到页面">              //点这个会跳到action
		<input type="submit" value="保存为草稿" formaction="http://www.qq.com">  点这个会跳到这里的网址
	</form>

5、datalist: 输入框选择列表，配合list使用 ，list值为datalist的id值
如：

用户名：<input type="text" name="user" list="data" placeholder="请输入用户名" required autocomplete="off">   // list 的值 与下面 id 的值一样，就可以关联
		<datalist id="data">
			<option>aa</option>
			<option>aabb</option>
			<option>aaabbb</option>
			<option>aacc</option>
		</datalist>
		密码：<input type="password" placeholder="请输入用密码" required>
		<input type="submit">

效果：

6、output: 计算或脚本输出

<form method="get" oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">          //  使用  oninput  属性计算 
		数字1：<input type="number" name="num1" required autocomplete="off">
		数字2：<input type="number" name="num2" required autocomplete="off">
		<output name="result"></output>                                                                                                   //  name = "result"  与上面关联 输出结果