整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          一個用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


          主站蜘蛛池模板: 久久国产香蕉一区精品| 国产精品视频免费一区二区三区 | 无码国产精品一区二区免费式影视| 国产精品免费视频一区| 久久久精品人妻一区二区三区四| 果冻传媒一区二区天美传媒| 日本高清天码一区在线播放| 2021国产精品视频一区| 日韩精品无码一区二区三区不卡 | 日本一区二区三区在线观看| aⅴ一区二区三区无卡无码| 国产精品日韩一区二区三区| 无码中文字幕乱码一区| 亚洲国产精品综合一区在线 | 另类国产精品一区二区| 亚洲精品一区二区三区四区乱码| 久久人妻内射无码一区三区 | 无码人妻久久一区二区三区免费丨| 亚洲国产综合精品中文第一区| 国产在线无码视频一区二区三区| 国产精品免费大片一区二区| 一区二区三区四区电影视频在线观看| 国产精品538一区二区在线| 国产传媒一区二区三区呀| 精品在线一区二区三区| 色精品一区二区三区| 亚洲性日韩精品一区二区三区| 波多野结衣中文字幕一区| 亚洲国产av一区二区三区| 免费观看一区二区三区| 无码人妻少妇色欲AV一区二区| 一区二区三区精品| 亚洲丰满熟女一区二区哦| 国产成人精品无码一区二区老年人 | 少妇人妻精品一区二区三区| 亚洲第一区视频在线观看| 无码夜色一区二区三区| 无码人妻一区二区三区在线水卜樱 | 在线观看一区二区三区av| 日韩a无吗一区二区三区| 久久精品人妻一区二区三区|