家好,我是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等等場景都是需要表單。那么在本篇中,筆者除了講一些基本的知識點,還會再結合后端的方式來演示如何接收表單提交的數據。希望這些小小的演示可以起到拋磚引玉的效果。
構建表單,主要是通過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屬性進行綁定呢。
什么是單選按鈕?就是在多個選項中,你只能選其中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來實現需要使用單選按鈕的場景。
什么是復選框?復選框就是可以選擇多個選項,當需要多選的時候,使用復選框輸入類型就對了。看下面代碼:
<!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,這個是重點哦!
當有數據要提交給后端的時候怎么搞?如果后端是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"了嗎?
在之前的例子中,前端表單需要將數據提交給后端,除了需要一個提交按鈕外,還需要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屬性的用法有了進一步的理解呢?
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,還結合了后端的一丟丟知識,前端和后端的知識點以后都會慢慢講到哈!
先來個前端代碼:
<!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語言”,并提交
后端啥也沒干,就只做了打印
前端代碼:
<!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
*請認真填寫需求信息,我們會在24小時內與您取得聯系。