• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html中关于form与表单提交操作的资料集合

    这里我们介绍一下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 表单的代码:

    <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>

    E-mail 验证

    下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

    意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:

    function validate_email(field,alerttxt)
    {
    with (field)
    {
    apos=value.indexOf("@")
    dotpos=value.lastIndexOf(".")
    if (apos<1||dotpos-apos<2) 
      {alert(alerttxt);return false}
    else {return true}
    }
    }

    下面是连同 HTML 表单的完整代码:

    <html>
    <head>
    <script type="text/javascript">
    function validate_email(field,alerttxt)
    {
    with (field)
    {
    apos=value.indexOf("@")
    dotpos=value.lastIndexOf(".")
    if (apos<1||dotpos-apos<2) 
      {alert(alerttxt);return false}
    else {return true}
    }
    }
    
    function validate_form(thisform)
    {
    with (thisform)
    {
    if (validate_email(email,"Not a valid e-mail address!")==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>

    快捷键提交

    在没有form元素包裹的情况下,即使当前页面的焦点在表单元素上,按回车键也不会触发表单提交,对于用户而言,需要从键盘控制切换到鼠标/手势控制,破坏了原有的流畅度。解决方法最简单的就是在外层用一个form元素包裹,并且确定form元素中起码有一个提交按钮。此时当表单中的输入域得到焦点时,用户按回车键便会触发提交。

    浏览器记住账号密码

    在提交表单时,高级浏览器包括移动端浏览器,会询问用户是否需要记住用户账号密码,对于一般用户而言,这是一个十分有用的特性,特别是在移动端,可以为用户节省很多时间。在没有form元素的情况下,浏览器不会弹出该询问窗口。

    总结

    我们在开发一个表单应用的时候,不应该尝试去除form元素直接进行提交,在form元素中应该包含一个提交按钮,如果是button元素,应该手动加上type="submit"属性。提交事件的处理在form元素的submit事件中,而非提交按钮的click事件。

    参考:

    form元素与表单提交

  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    html中关于form与表单提交操作的资料集合 html,中,关于,form,与,表单,