html标签，详细解读表单form相关的几种特殊使用方法

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

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

特殊的input

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

不指明type

默认情况下，不指明input的type的话，会表现为一个输入框。但是因为这种情况下，会有歧义发生（历史上，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>

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

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提交之前，需要对表单数据进行前置验证，验证失败会阻止继续提交。

普通的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里面的话，

• this是window，而不是form。
• 不用return false，不会触发事件提交的。

基于jquery的onsubmit

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

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

关键代码是：

e.preventDefault();

基于react的onsubmit

基于react的submit和jquery的基本类似，都是使用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;

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

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

相关链接

• https://newsn.net/say/rel-noopener-noreferrer.html
• https://newsn.net/say/html-img-space.html
• https://newsn.net/say/css-marker.html
• https://newsn.net/say/css-box-sizing.html
• https://newsn.net/say/css-content-attr.html

总结

更多html5的标签解读经验文章，请点击：

• https://newsn.net/tag/html5/

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