js html5 表单操作 html5的表单

表单:用于收集用户信息,并且将信息提交到服务器

action:服务器地址
 method:get/post 默认是get所有表单input 信息都要写在form中-->
<form action="#" method="get">
 
</form>

 

1,用label标签将文本信息和表单元素绑定:点击文本时让元素自动获取焦点 点击前面的字 后面的输入框直接自动获取焦点

在label的for中输入input的id名-->

<label for="user" >用户名</label>
<input type="text" id="user" name="username">
   
 <!-- input的类型有 radio单选 checkbox多选 button img submit提交 reset重置 file -->

 

2,search搜索框 带有圆角 当输入框中有内容时,会在输入框末尾添加一个清空按钮
一般配合ajax使用 -->

动态验证:减轻服务器的压力 针对于简单的格式 类型进行验证 跟正则一样

3,email:邮箱 动态验证 匹配原则:必须出现@ 并且@前后有内容 

 

 

(4)URL:网址 动态验证 匹配原则: 必须以网络传输协议开头 http: ftp:
在输入时必须有这些信息否则提交时提示错误

 

  (5)number:数字 动态验证 只能输入数字  并且在末尾添加了增减的按钮   可以减到负数  但都是整数 减时采取四舍五入

 

 (6)tel: 没有动态验证 -

 

 

(7)range:滑块  max设置滑动条的最大值 min设置最小值 value设置当前值 

 

8)date:日期选择 value设置默认值, 格式:yyyy-mm-dd   yyyy-0m-0d-

 

 

(9)week: 周数选择  设置默认值 格式:yyyy-www 

 

(10)time 时间-->

 

(11)color颜色  可以弹出调色板自己选颜色

 

(12)datetime-local 

 

 

 

 

 

<!-- 搜索框中提示输入的字相关的名称 -->
 <!-- list:h5中新增加的属性 该属性可以为当前元素绑定数据列表 --><!-- datalist:数据列表 配合option使用 每一个option都是一个选项
 默认不显示 需要用户点击按钮或者输入匹配的值(仅限开头匹配)
 --><!-- datalist和select的区别:前者仅仅是提供了一个用户输入的合法值的列表 后者提供了一个用户可以选择信息的列表 -->
<!-- lable 本身没有任何意义 当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上 -->

 

 

input表单必须写在form中

<!-- from表单中action属性是表单提交的地点 -->
 <!-- keygen提交表单时会生成两个键 一个秘匙 一个私匙 私匙存储客户端 秘匙发送服务器 用于验证客户整数 --><form action="#">
 用户名:<input type="text" name="username"><br><br>
 加密:<keygen name="sec"></keygen>
 <input type="submit" value="提交">

 </form>

 

滑动显示数字

 

结合javaScript 主要用于显示脚本输出 可以把form中的oninput当做一个添加的属性事件 把两个关联起;来显示滑动时的数字 -->

<!-- οninput="x.value=a.value"
 output.value = input.value-->

 

 

 

-----------------------

input中的属性
属性的写法
 属性名="属性值"

 在html5中 属性值等于属性名时,属性值可以省略 单引号和双引号也没有严格的区分
 --><!--
 form:可以将表单外的控件和表单相关联使控件中的内容可以被提交到服务器requried: 表示当前表单元素内容为必填项
autocomplete: 自动填充 在网页的文本框中输入部分内容就可以将之前输入过的内容进行填充
 ,off表示关闭自动填充

 minlength maxlength:允许输入的最长/最短字符数

 min/max: 配合 type=number 允许输入的取值范围
 step:设置type=number上增减的范围值 最小倍数

 novalidate: 表单中的属性不再进行验证type=file 显示文件按钮查找要上传的文件
multiple 倍数 可以多选一起上传
 formnovalideate:foemnovalidate = "formnovalidate"autocompiete:默认为on 让浏览器自动记录之前输入的值

 frommethod="get/post"fromtarget="_blank" 在新的页面打开