HTML中如何使用html表单提交的操作

这里我们介绍一下form元素与表单提交方面的知识。

form元素

form元素的DOM接口是HTMLFormElement，继承自HTMLElement，因而它与其他的HTML元素拥有相同的默认属性，不过它自身还有几个独有的属性和方法：

属性值

说明

accept-charset 服务器能够处理的字符集，多个字符集用空格分割

action 接受请求的URL，该值可以被form元素中的input或button元素的formaction属性覆盖

elements 表单中所有控件集合(HTMLCollection)

enctype 请求的编码类型，该值可以被form元素中的input或button元素的formenctype属性覆盖

length 表单中控件的数量

method 要发送的HTTP请求类型，通常是“get”或“post”，该值可以被form元素中的input或button元素的formmethod属性覆盖

name 表单的名称

reset() 将所有表单域重置为默认值

submit() 提交表单

target 用于发送请求和接收响应的窗口名称，该值可以被form元素中的input或button元素的formtarget属性覆盖

autocomplete 是否自动补全表单元素

input元素

input元素是应用非常广泛的表单元素，根据type属性值的不同，有以下几种常用用法：

文本输入 input type= text name=
提交输入 input type= submit
单选钮输入 input type= radio name= 必须有相同的名字 value= 填的值最好对应
复选框输入 input type= checkbox name= 相同的名字 value= 不同的对应值
数字输入 input type= number min= max= 输入框只能输入数字，可设置最大值，最小值。
范围输入 input type= range min= max= 类似number，但它会显示一个滑动条，而不是输入框。
颜色输入 input type= color 会弹出一个颜色选择器。
日期输入 input type= date 会弹出一个日期选择器。
email输入 input type= email 显示为一个文本输入框，并会弹出一个定制键盘。
tel输入 input type= tel 跟email输入类似
url输入 input type= url 跟email输入类似，也会弹出一个定制键盘。
textarea元素可以创建一个多行的文本区。
textarea name= id= cols= 30 rows= 10 /textarea
其中cols和row的属性值分别表示文本区宽度和高度的字符。
select元素和option元素结合使用可创建一个下拉菜单。
select name= id= option value= /option option value= /option option value= /option /select

radio

如何 分组? 设置不同的 name属性即可

例：

input type= radio name= favourite value= 玩游戏 玩游戏
input type= radio name= favourite value= 写代码 写代码

input type= radio name= sex value= man 男
input type= radio name= sex value= woman 女、
这就是两组radio

placeholder

提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

type=hidden

定义隐藏的input。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。
比如用于安全方面，给后台传输用户不可见的name 和value值，让后台做校验，防伪造页面。

提交按钮

在form中加入一个提交按钮，便可使用户得以提交表单。

下列三种按钮皆可在点击时触发表单的submit事件：

 input type= submit /  button type= submit /button  input type= image / 

规范中button元素的type默认值是submit，但是在IE678下默认值是button，所以从兼容性考虑有必要为button元素手动加上type= submit 属性。

submit事件

初心者可能会认为表单提交是提交按钮的click事件触发，其实不然，按钮元素的click事件与表单的submit事件在不同的浏览器中执行顺序不一，所以为了能准确控制表单提交事件，我们会选择在表单的submit事件中执行验证等操作。

form.addEventListener( submit , function (e) { if (valid()) { e.preventDefault()})

当form元素中没有上述的三个按钮中任何一个的时候，用户将无法提交表单（回车键也无效），此时可以利用form元素特有的submit()方法执行提交表单，需要注意的是调用submit()方法并不会触发form元素的submit事件，表单的验证等操作应该在调用submit()方法之前。

if (valid()) { form.submit()}

表单提交与用户体验

基于现在流行的ajax+跨域POST（CORS）技术，我们很可能不使用form元素直接向服务器提交数据。这虽然可行，但在大多数情况下存在着体验劣化现象。

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

被 JavaScript 验证的这些典型的表单数据有：

用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？
必填（或必选）项目

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

function validate_required(field,alerttxt)with (field)if (value==null||value== ) {alert(alerttxt);return false}else {return true}}

 html  head  script type= text/javascript function validate_required(field,alerttxt)with (field) if (value==null||value== ) {alert(alerttxt);return false} else {return true}function validate_form(thisform)with (thisform) if (validate_required(email, Email must be filled out! )==false) {email.focus();return false} /script  /head  body  form action= submitpage.htm onsubmit= return validate_form(this) method= post Email: input type= text name= email size= 30  input type= submit value= Submit  /form  /body  /html 

相信看了这些案例你已经掌握了方法，更多精彩请关注php 其它相关文章！

相关阅读：

怎样在HTML网页中插入视频

html怎样格式化输出JSON数据

怎样用HTML做出移动端固定悬浮半透明搜索框

以上就是HTML中如何使用html表单提交的操作的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。