我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

本文说一个特别基础的html标签,就是form标签。在早期的互联网时代,表单就是最基础的数据提交方式。但是,在后来的互联网发展中,这个表单就不是唯一的数据提交准则了。所以,本文的表单form写法,就偏向于一些较为另类但实用的用法。

苏南大叔:html标签,详细解读表单form相关的几种特殊使用方法 - form表单相关
html标签,详细解读表单form相关的几种特殊使用方法(图5-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文描述form表单的一些另类用法,不求全但求精致。测试环境:win10chrome@106.0.5249.119

特殊的input

<input>可以有不同的type,不同的type也有不同的表现形式。

苏南大叔:html标签,详细解读表单form相关的几种特殊使用方法 - html标签
html标签,详细解读表单form相关的几种特殊使用方法(图5-2)

不指明type

默认情况下,不指明inputtype的话,会表现为一个输入框。但是因为这种情况下,会有歧义发生(历史上,ie浏览器曾经把这种情况解释为一个按钮),所以最好指定一下type="text",再指定一下placeholder属性(考试要考的)。

<input placeholder="text" />

hidden隐藏数据

<input type="hidden" name="info" value="val"/>

用于传递些默认信息,比如:修改文章的时候的id

textarea的文字设置

<textarea name="content">文字放这里</textarea>

textarea的文字内容,并不是放置在value里面的,而且文字前面的空白字符会被展示出来,所以文字必须紧贴标签。这个和html格式化这事就是冲突的。格式化的话,必然有回车换行空白字符,但是它们会被在textarea的内容文字上体现出来。

textarea禁止改变大小

默认情况下,textarea是可以拖动改变大小的。这个显然是和常理有些不符。解决方案是:

<textarea></textarea>
<style>
    textarea{
        resize:none;
    }
</style>

这种情况下,右下角的特殊纹饰会消失。

或者:

<textarea></textarea>
<style>
    textarea{
        width: 300px;
        height: 300px;
        max-width: 300px;
        max-height: 300px;
        min-width: 300px;
        min-height: 300px;
    }
</style>

这种情况下,就是同时设置宽(高)度、最大宽(高)度、最小宽(高)度都一样。

苏南大叔:html标签,详细解读表单form相关的几种特殊使用方法 - textarea-resize
html标签,详细解读表单form相关的几种特殊使用方法(图5-3)

submit提交按钮

正常情况下来说,提交按钮是这样的。

<input type="submit" value="提交" />

正常情况下来说,这是个上书“提交”两个大字的按钮。如果用css定义的话,这部分文字也是可以用font相关属性定义的。

image图片提交按钮

还可以使用图片做提交按钮,不用写特殊事件,直接就可以触发提交动作。

<input type="image" src="submit.png" />

苏南大叔认为:不如对submit按钮应用一下css背景图,更靠谱一些。例如:

<input type="submit" value="" />
<style>
    input[type="submit"] {
        background: left top no-repeat url("submit.png");
        width: 100px;
        height: 40px;
        border: 1px solid white;
    }
    input[type="submit"]:hover {
        border: 1px solid red;
    }
</style>

text回车自动提交

<input type="text"/>有个特殊的隐藏技能,就是输入框里面回车,会触发表单的提交。就目前的测试结果来看,这个输入框回车触发提交的动作,和输入框的数量无关。(历史上,是当且仅当一个输入框的时候,才会触发提交。)

如果想禁用这种<input type="text"/>的自动表单提交功能的话,可以写js事件,例如:

<input name="name" type="text" placeholder="默认提示文字" onkeydown='if(event.keyCode==13){return false;}' />

button

放在form里面的button,点击的时候,也会自动触发submit事件。

<form action="form.php" method="post">
  <button>提交</button>
</form>

form阻止提交

这里再说说阻止form的提交,正常情况下来说,都是会阻止form的提交的。因为,ajax类似技术现在已经很成熟,页面不刷新更新更符合潮流。并且一般在form提交之前,需要对表单数据进行前置验证,验证失败会阻止继续提交。

苏南大叔:html标签,详细解读表单form相关的几种特殊使用方法 - 阻止提交及序列化
html标签,详细解读表单form相关的几种特殊使用方法(图5-4)

普通的onsubmit

<form action="#" method="post" id="form" onsubmit="return check()">
    <input name="keyword" type="text"/>
</form>
<script>
    function check() {
        return false;
    }
</script>

这里需要注意的就是return字样,onsubmit="return false"的字样,就是禁止提交。return true的字样,就是检测通过,可以提交。

放在action里面不用return

<form method="post" action="javascript:doaction(this)">
    <input type="input" name="who" value="苏南大叔测试jquery提交表单" />
    <button>提交数据</button>
</form>
<script type="text/javascript">
    function doaction(obj) {
        console.log(obj, typeof (obj));
        console.log(obj == window);
        var data = new FormData(document.forms[0]);
        data.forEach((value, name) => {
            console.log(name, value);
        });
    }
</script>

js事件放在action里面的话,

  • thiswindow,而不是form
  • 不用return false,不会触发事件提交的。

基于jquery的onsubmit

基于jquerysubmit()和普通的onsubmit()是有些不同的。里面通过阻止事件的默认行为来禁止提交。

<form></form>
<script>
    $("form").submit(function (e) {
        e.preventDefault();
    });
</script>

关键代码是:

e.preventDefault();

基于reactonsubmit

基于reactsubmitjquery的基本类似,都是使用e.preventDefault()来阻止表单提交的。

import { memo, useRef } from 'react';
const Control = memo(function Control(props) {
    const inputRef = useRef();
    const onSubmit = (e) => {
        e.preventDefault();
        console.log(inputRef.current.value);
    };
  return (
    <form onSubmit={onSubmit}>
        <input 
            type="text" 
            ref = {inputRef}
            className='new-todo'
            placeholder='Add a new task'
        />
    </form>
  )
})
export default Control;

苏南大叔:html标签,详细解读表单form相关的几种特殊使用方法 - form表单-react
html标签,详细解读表单form相关的几种特殊使用方法(图5-5)

form序列化数据

通常来说,form提交的数据会需要在前端做各种组合,然后再提交。不过,对于jquery来说,这种组合提交还可以使用一句话就搞定。比如:

<form></form>
<script>
    $("form").submit(function (e) {
        var data = $("form").serialize();
        // keyword=&keyword2=%E8%8C%83%E5%BE%B7%E8%90%A8%E5%88%86&keyword3=
        e.preventDefault();
    });
</script>

关键代码是:

$("form").serialize()

至于服务器端如何解析这个字符串,就暂时不是本文要讨论的内容。

相关链接

总结

更多html5的标签解读经验文章,请点击:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   html5