整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

一个用Markdown来设计HTML表单的小工具

家好，我是TJ

关注TJ君比较久的读者应该知道，我是一名后端开发。对于前端知识是比较零碎的，所以很多时候写表单这样的工作，一般就是复制黏贴，然后改改字段。对于HTML格式，一直觉得比较杂乱，不够简洁。

最近TJ发现了一个有趣的小工具：Create HTML Form。

看看上面它的Slogan，是不是很有意思？居然可以通过Markdown来编写HTML的表单？下面就来一起看看这款工具的能力。

下面是官方页面给出的Markdown案例：

## Example Form

name* = ___ 
Email = ___[@] Enter Email
Password = ___[*] ***

city = {Boston, SFO -> San Francisco, (NYC -> New York City)}

size = () small (x) medium () large            

I agree to share my information with partners = ___[checkbox]

Publish on my profile = ___[switch]
User Number = ___[1-10]
Phone Number* = ___[r2002000000-9999999999]
Color = ___[color]
Date = ___[date]

Save = ___[+]

通过上面的Markdown内容，将获得如下图所示的结果内容：

其中，左边是表单的可视化结果，右边是具体的HTML代码（包括：pico.css、bootstrap、tailwindcss三种），根据自己需要选择性的复制就用就可以了。怎么样？是不是很有趣？

如果你觉得写Markdown还麻烦，也可以通过官方给出的表单库open in new window去找找是否有自己需要的，可以直接去复制黏贴：

好了，今天的分享就到这里。最后，奉上该站点地址：https://createhtmlform.com/open in new window，有需要的就冲吧

单在网页中主要负责数据采集功能，在JavaScript的加持下，网页中的表单可以有很多的功能，今天小编将为大家带来大数据编程入门：JavaScript表单。

JavaScript表单验证

HTML表单验证可以通过JavaScript完成。

下面的示例代码用于确定表单字段（fname）值是否存在。如果不存在，将弹出一条消息以阻止提交表单：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script>

function validateForm() {

var x = document.forms["myForm"]["fname"].value;

if (x == null || x == "") {

alert("需要输入名字。");

return false;

}

}

</script>

</head>

<body>

<form name="myForm" action="demo_form.php"

onsubmit="return validateForm()" method="post"><!-- 调用JavaScript中的代码 -->

名字: <input type="text" name="fname"><input type="submit" value="提交">

</form>

</body>

</html>

运行结果：

在上面的<!-- 调用JavaScript中的代码 -->中的<!-- 注释 -->在HTML中是一段注释用的语句。

JavaScript验证输入的数字

在HTML中想要验证输入的数字，可以使用JavaScript来进行验证，示例如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<h1>JavaScript 验证输入</h1>

<p>请输入 1 到 10 之间的数字：</p>

<input id="numb">

<button type="button" onclick="myFunction()">提交</button>

<p id="demo"></p>

<script>

function myFunction() {

var x, text;

// 获取 id="numb" 的值

x = document.getElementById("numb").value;

// 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10

if (isNaN(x) || x < 1 || x > 10) {

text = "输入错误";

} else {

text = "输入正确";

}

document.getElementById("demo").innerHTML = text;

}

</script>

</body>

</html>

运行结果：

HTML表单自动验证

HTML表单验证也可以通过浏览器自动完成。

如果表单字段（fname）的值为空，则required属性将阻止提交表单：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<form action="demo_form.php" method="post">

<input type="text" name="fname" required="required">

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

</form>

<p>点击提交按钮，如果输入框是空的，浏览器会提示错误信息。</p>

</body>

</html>

运行结果：

数据验证

数据验证用于确保用户输入的数据有效。

典型的数据验证包括：

①　是否输入了必填字段？

②　用户是否输入了合法数据？

③　您是否在数字字段中输入了文本？

在大多数情况下，数据验证用于确保用户正确输入数据。

可以使用不同的方法定义数据验证，并以多种方式调用。

服务器端数据验证是在数据提交到服务器后进行验证。

客户端数据验证是在将数据发送到服务器之前在浏览器上完成验证。

HTML约束验证

HTML5为HTML表单添加了一种新的验证方法：约束验证。

约束验证是浏览器在提交表单时用于实现验证的算法。

HTML约束验证基于：

①　HTML输入属性

②　CSS伪类选择器

③　DOM属性和方法

约束验证HTML输入属性

属性

描述

disabled

规定输入的元素不可用

max

规定输入元素的最大值

min

规定输入元素的最小值

pattern

规定输入元素值的模式

required

规定输入元素字段是必需的

type

规定输入元素的类型

约束验证CSS伪类选择器

选择器

描述

:disabled

选取属性为 "disabled" 属性的 input 元素

:invalid

选取无效的 input 元素

:optional

选择没有"optional"属性的 input 元素

:required

选择有"required"属性的 input 元素

:valid

选取有效值的 input 元素

以上就是关于大数据编程入门：JavaScript表单的全部内容了，希望这篇文章可以帮助到大家~

在开篇

什么是表单呢？当前端想要提交数据给后端，怎么搞？那么在前端开发中，表单是常用的手段，比如常见的场景有：登录框、账号注册页、主机信息录入CMDB等等场景都是需要表单。那么在本篇中，笔者除了讲一些基本的知识点，还会再结合后端的方式来演示如何接收表单提交的数据。希望这些小小的演示可以起到抛砖引玉的效果。

盘点HTML表单基础

1. from元素

构建表单，主要是通过from元素，我们先来一个最简单的小栗子，看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息录入CMDB</h3>
        <form>
            <label for="hostname">主机名：</label><br>
            <input type="text" id="hostname" name="hostname"><br>
            <label for="ipaddr">IP地址：</label><br>
            <input type="text" id="ipaddr" name="ipaddr"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图：

通上面的小栗子可以知道，form表单的主要通途是用于收集用户的输入。在from表单里面，还包含着各种不同类型的input元素，比如我们上面小栗子中用到的文本（text）、提交按钮（submit）。

input元素是表单里最重要的元素，它有很多type属性，下面我们来总结下：

类型描述text文本输入radio单选按钮checkbox提交按钮submit提交按钮button可单击按钮

在上面小栗子中，除了input元素之外，不知道大家注意label元素没有。label元素的主要用途是为input元素定义标签，且用for属性和input元素的id属性进行绑定呢。

2. 单选按钮

什么是单选按钮？就是在多个选项中，你只能选其中1个，不能多选。下面我们看个小栗子，看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>问答题1（单选）：某站长，工作经验不足1年，仅从互联网收集学习资料制定学习路线售卖盈利，从道德层面角度分析是否有问题？</h3>
        <form>
            <input type="radio" id="i1" name="problem" value="yes">
            <label for="i1">有</label>
            <input type="radio" id="i2" name="problem" value="no">
            <label for="i2">没有</label>
            <input type="radio" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label>
        </form>
        <h3>问答题2（单选）：实际工作经验不足1年的人员折腾的学习资料您觉得是否对你有帮助？</h3>
        <form>
            <input type="radio" id="w1" name="problem" value="yes">
            <label for="w1">有</label>
            <input type="radio" id="w2" name="problem" value="no">
            <label for="w2">没有</label>
            <input type="radio" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label>
        </form>
    </body>
</html>

效果如下图：

上面的小栗子中，出了两道问答题，均为单选题。那么，类似的需求都是可以使用输入类型为radio来实现需要使用单选按钮的场景。

3. 复选框

什么是复选框？复选框就是可以选择多个选项，当需要多选的时候，使用复选框输入类型就对了。看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>问答题1（单选）：某站长，工作经验不足1年，仅从互联网收集学习资料制定学习路线售卖盈利，从道德层面角度分析是否有问题？</h3>
        <form>
            <input type="checkbox" id="i1" name="problem" value="yes">
            <label for="i1">有</label>
            <input type="checkbox" id="i2" name="problem" value="no">
            <label for="i2">没有</label>
            <input type="checkbox" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
        <h3>问答题2（单选）：实际工作经验不足1年的人员折腾的学习资料您觉得是否对你有帮助？</h3>
        <form>
            <input type="checkbox" id="w1" name="problem" value="yes">
            <label for="w1">有</label>
            <input type="checkbox" id="w2" name="problem" value="no">
            <label for="w2">没有</label>
            <input type="checkbox" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图：

上面的小栗子中，实现复选框的输入类型是checkbox，这个是重点哦！

4. 提交按钮

当有数据要提交给后端的时候怎么搞？如果后端是API服务，可以给它提交json。如果是前端页面，就需要通过构建表单来获取用户的输入。基于表单提交数据给后端，怎么提交？需要一个可以点击的提交按钮，那这个按钮怎么来？先看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form>
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图：

输入类型为submit，说明它就是提交按钮，注意上面代码type="submit"了吗？

HTML表单重要属性

1. Action属性

在之前的例子中，前端表单需要将数据提交给后端，除了需要一个提交按钮外，还需要action属性。当点击提交按钮后，表单的数据该发到后端的哪个url进行处理，就是定义在action属性中。接下来，我们结合前端和后端直接来个小实战，后端代码用Python的Flask框架。

前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码：

from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=["GET", "POST"])
def ttropsstack():
    args = request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端和后端的代码写完后，我们接下来看看效果

输入IP地址后，点击提交

这个ok是后端返回的

后端接收到数据后，啥也没做，只是做了简单打印

这个小栗子很简单，通过这个小栗子，是不是对action属性的用法有了进一步的理解呢？

2. Method属性

method属性的用途是指定提交数据的http方法，通常有2个，get和post。接下来我们在上个小栗子的基础上做个小改造，看下面代码

前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="get">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码：

from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=["POST"])
def ttropsstack():
    args = request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

当前端输入数据后，提交表单时，直接告诉你这是不允许的方法

在这个例子中，是因为前端的表单了指定了method为get请求，而后端接收数据的method规定了需要post请求，故所以出现这个问题。

下面我们改造一下后端代码：

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        print request.get_data(as_text=True)
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端表单中的method还是保持get请求，再次提交，后端的返回如下：

看到了吗？后端判断前端过来的请求是get还是post，很显然，前端过来的请求是get，并且返回了非常友好的提示。

接下来我们继续改造一下前端的代码，将请求修改为post，代码如下：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码也稍微改造一下，改变接收前端数据的方法

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        a = request.form
        print a.get('ip')
        print type(a)
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

输入IP地址，并点击提交

提交后，后端给前端返回了ok

接下来看下后端，后端啥也没做，就获取到表单的数据，然后打印了数据，并且打印了下数据类型

好了，关于前端的action属性和Method属性就讲到这里了。为了讲解action和method，还结合了后端的一丢丢知识，前端和后端的知识点以后都会慢慢讲到哈！

HTML表单常用元素

1. 下拉列表

先来个前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">运维开发应掌握的技能：</label>
            <select id="opslist" name="opslist">
                <option value="python">Python语言</option>
                <option value="go">Go语言</option>
                <option value="shell">Shell语言</option>
                <option value="database">数据库</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">网络</option>
                <option value="storage">存储</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

后端代码：

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        a = request.form
        print a.get('opslist')
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

在下拉框中选择“Go语言”，并提交

后端啥也没干，就只做了打印

2. 允许多选

前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">运维开发应掌握的技能：</label>
            <select id="opslist" name="opslist" size="6" multiple>
                <option value="python">Python语言</option>
                <option value="go">Go语言</option>
                <option value="shell">Shell语言</option>
                <option value="database">数据库</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">网络</option>
                <option value="storage">存储</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

上述前端代码中，是使用multiple属性来实现选择多个值。

后端代码的打印方式稍微做了些许调整：

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        data = request.get_data()
        print data
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

按住ctrl或者shift键可进行多选

后端打印的效果图下图：

写在最后

关于表单基础知识点的讲解就这么愉快的结束了，关于更多表单的元素、输入属性、输入类型可自行查阅和实战，笔者因时间有限就不一一演示。感谢您的阅读，望多多关注我们、点赞、转发！

本文转载于（喜欢的盆友关注我们）：https://mp.weixin.qq.com/s/L-Msv39JrF7AzRx4K1OLjA


在线咨询
上一篇：抖音新手入坑工具合集，上热门必备
下一篇：PhotoShop（Ps2024）永久下载安装使用教程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 海口 盐边县 镇安县 金湾区 仁和区 赣州 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服