16.HTML 表單提交

現(xiàn)代web開發(fā)中，表單是用戶與網(wǎng)站互動的重要方式之一。HTML5為表單提交提供了強(qiáng)大的功能和豐富的輸入類型，讓收集和驗(yàn)證用戶輸入數(shù)據(jù)變得更加容易和安全。本文將詳細(xì)介紹HTML5表單的各個方面，包括基本結(jié)構(gòu)、輸入類型、驗(yàn)證方法和提交過程。

基本結(jié)構(gòu)

HTML表單由<form>標(biāo)簽定義，它可以包含輸入字段、標(biāo)簽、按鈕等元素。一個基本的表單結(jié)構(gòu)如下所示：

<form action="/submit_form" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">電子郵箱：</label>
  <input type="email" id="email" name="email" required>
  
  <input type="submit" value="提交">
</form>

在這個例子中，表單有兩個輸入字段：姓名和電子郵箱。每個輸入字段都有一個<label>標(biāo)簽，這不僅有助于用戶理解輸入的內(nèi)容，也有助于屏幕閱讀器等輔助技術(shù)。<form>標(biāo)簽的action屬性定義了數(shù)據(jù)提交到服務(wù)器的URL，method屬性定義了提交數(shù)據(jù)的HTTP方法（通常是post或get）。

輸入類型

HTML5提供了多種輸入類型，以支持不同的數(shù)據(jù)格式和設(shè)備。

文本輸入

<!-- 單行文本 -->
<input type="text" name="username" placeholder="請輸入用戶名" required>

<!-- 密碼 -->
<input type="password" name="password" required minlength="8">

<!-- 郵箱 -->
<input type="email" name="email" required placeholder="example@domain.com">

<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索...">

數(shù)值輸入

<!-- 數(shù)值 -->
<input type="number" name="age" min="18" max="100" step="1" required>

<!-- 滑動條 -->
<input type="range" name="volume" min="0" max="100" step="1">

<!-- 電話號碼 -->
<input type="tel" name="phone" pattern="^\+?\d{0,13}" placeholder="+8613800000000">

日期和時(shí)間輸入

<!-- 日期 -->
<input type="date" name="birthdate" required>

<!-- 時(shí)間 -->
<input type="time" name="appointmenttime">

<!-- 日期和時(shí)間 -->
<input type="datetime-local" name="appointmentdatetime">

選擇輸入

<!-- 復(fù)選框 -->
<label><input type="checkbox" name="interest" value="coding"> 編程</label>
<label><input type="checkbox" name="interest" value="music"> 音樂</label>

<!-- 單選按鈕 -->
<label><input type="radio" name="gender" value="male" required> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>

<!-- 下拉選擇 -->
<select name="country" required>
  <option value="china">中國</option>
  <option value="usa">美國</option>
</select>

特殊輸入

<!-- 顏色選擇器 -->
<input type="color" name="favcolor" value="#ff0000">

<!-- 文件上傳 -->
<input type="file" name="resume" accept=".pdf,.docx" multiple>

驗(yàn)證方法

HTML5表單提供了內(nèi)置的驗(yàn)證功能，可以在數(shù)據(jù)提交到服務(wù)器之前進(jìn)行檢查。

必填字段

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

正則表達(dá)式

<input type="text" name="zipcode" pattern="\d{5}(-\d{4})?" title="請輸入5位數(shù)的郵政編碼">

數(shù)值范圍

<input type="number" name="age" min="18" max="99">

長度限制

<input type="text" name="username" minlength="4" maxlength="8">

表單提交

當(dāng)用戶填寫完表單并點(diǎn)擊提交按鈕時(shí)，瀏覽器會自動檢查所有輸入字段的有效性。如果所有字段都滿足要求，表單數(shù)據(jù)將被發(fā)送到服務(wù)器。否則，瀏覽器會顯示錯誤信息，并阻止表單提交。

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

可以使用JavaScript來自定義驗(yàn)證或處理提交事件：

document.querySelector('form').addEventListener('submit', function(event) {
  // 檢查表單數(shù)據(jù)
  if (!this.checkValidity()) {
    event.preventDefault(); // 阻止表單提交
    // 自定義錯誤處理
  }
  // 可以在這里添加額外的邏輯，比如發(fā)送數(shù)據(jù)到服務(wù)器的Ajax請求
});

完整例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單提交并顯示JSON</title>
</head>
<body>

<!-- 表單定義 -->
<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <br>

  <label for="email">電子郵件：</label>
  <input type="email" id="email" name="email">
  <br>

  <input type="button" value="提交" onclick="submitForm()">
</form>

<script>
// JavaScript函數(shù)，處理表單提交
function submitForm() {
  // 獲取表單元素
  var form = document.getElementById('myForm');
  
  // 創(chuàng)建一個FormData對象
  var formData = new FormData(form);
  
  // 創(chuàng)建一個空對象來存儲表單數(shù)據(jù)
  var formObject = {};
  
  // 將FormData轉(zhuǎn)換為普通對象
  formData.forEach(function(value, key){
    formObject[key] = value;
  });
  
  // 將對象轉(zhuǎn)換為JSON字符串
  var jsonString = JSON.stringify(formObject);
  
  // 彈出包含JSON字符串的對話框
  alert(jsonString);
  
  // 阻止表單的默認(rèn)提交行為
  return false;
}
</script>

</body>
</html>

在這個例子中：

我們定義了一個包含姓名和電子郵件輸入字段的表單，以及一個按鈕，當(dāng)點(diǎn)擊按鈕時(shí)會調(diào)用submitForm函數(shù)。
在submitForm函數(shù)中，我們首先獲取表單元素并創(chuàng)建一個FormData對象。然后，我們遍歷FormData對象，將表單數(shù)據(jù)復(fù)制到一個普通的JavaScript對象formObject中。
接著，我們使用JSON.stringify方法將formObject轉(zhuǎn)換成JSON字符串。
最后，我們使用alert函數(shù)彈出一個包含JSON字符串的對話框。

注意，這個例子中我們使用了type="button"而不是type="submit"，因?yàn)槲覀儾幌Ｍ韱斡心J(rèn)的提交行為。我們的JavaScript函數(shù)submitForm會處理所有的邏輯，并且通過返回false來阻止默認(rèn)的表單提交。如果你想要使用type="submit"，你需要在<form>標(biāo)簽上添加一個onsubmit="return submitForm()"屬性來代替按鈕上的onclick事件。

結(jié)論

HTML5的表單功能為開發(fā)者提供了強(qiáng)大的工具，以便創(chuàng)建功能豐富、用戶友好且安全的網(wǎng)站。通過使用HTML5的輸入類型和驗(yàn)證方法，可以確保用戶輸入的數(shù)據(jù)是有效的，同時(shí)提高用戶體驗(yàn)。隨著技術(shù)的不斷進(jìn)步，HTML5表單和相關(guān)API將繼續(xù)發(fā)展，為前端工程師提供更多的可能性。

在開篇

什么是表單呢？當(dāng)前端想要提交數(shù)據(jù)給后端，怎么搞？那么在前端開發(fā)中，表單是常用的手段，比如常見的場景有：登錄框、賬號注冊頁、主機(jī)信息錄入CMDB等等場景都是需要表單。那么在本篇中，筆者除了講一些基本的知識點(diǎn)，還會再結(jié)合后端的方式來演示如何接收表單提交的數(shù)據(jù)。希望這些小小的演示可以起到拋磚引玉的效果。

盤點(diǎn)HTML表單基礎(chǔ)

1. from元素

構(gòu)建表單，主要是通過from元素，我們先來一個最簡單的小栗子，看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>主機(jī)信息錄入CMDB</h3>
        <form>
            <label for="hostname">主機(jī)名：</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屬性，下面我們來總結(jié)下：

類型描述text文本輸入radio單選按鈕checkbox提交按鈕submit提交按鈕button可單擊按鈕

在上面小栗子中，除了input元素之外，不知道大家注意label元素沒有。label元素的主要用途是為input元素定義標(biāo)簽，且用for屬性和input元素的id屬性進(jìn)行綁定呢。

2. 單選按鈕

什么是單選按鈕？就是在多個選項(xiàng)中，你只能選其中1個，不能多選。下面我們看個小栗子，看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>問答題1（單選）：某站長，工作經(jīng)驗(yàn)不足1年，僅從互聯(lián)網(wǎng)收集學(xué)習(xí)資料制定學(xué)習(xí)路線售賣盈利，從道德層面角度分析是否有問題？</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（單選）：實(shí)際工作經(jīng)驗(yàn)不足1年的人員折騰的學(xué)習(xí)資料您覺得是否對你有幫助？</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來實(shí)現(xiàn)需要使用單選按鈕的場景。

3. 復(fù)選框

什么是復(fù)選框？復(fù)選框就是可以選擇多個選項(xiàng)，當(dāng)需要多選的時(shí)候，使用復(fù)選框輸入類型就對了?？聪旅娲a：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>問答題1（單選）：某站長，工作經(jīng)驗(yàn)不足1年，僅從互聯(lián)網(wǎng)收集學(xué)習(xí)資料制定學(xué)習(xí)路線售賣盈利，從道德層面角度分析是否有問題？</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（單選）：實(shí)際工作經(jīng)驗(yàn)不足1年的人員折騰的學(xué)習(xí)資料您覺得是否對你有幫助？</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>

效果如下圖：

上面的小栗子中，實(shí)現(xiàn)復(fù)選框的輸入類型是checkbox，這個是重點(diǎn)哦！

4. 提交按鈕

當(dāng)有數(shù)據(jù)要提交給后端的時(shí)候怎么搞？如果后端是API服務(wù)，可以給它提交json。如果是前端頁面，就需要通過構(gòu)建表單來獲取用戶的輸入?；诒韱翁峤粩?shù)據(jù)給后端，怎么提交？需要一個可以點(diǎn)擊的提交按鈕，那這個按鈕怎么來？先看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>主機(jī)信息</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屬性

在之前的例子中，前端表單需要將數(shù)據(jù)提交給后端，除了需要一個提交按鈕外，還需要action屬性。當(dāng)點(diǎn)擊提交按鈕后，表單的數(shù)據(jù)該發(fā)到后端的哪個url進(jìn)行處理，就是定義在action屬性中。接下來，我們結(jié)合前端和后端直接來個小實(shí)戰(zhàn)，后端代碼用Python的Flask框架。

前端代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>主機(jī)信息</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地址后，點(diǎn)擊提交

這個ok是后端返回的

后端接收到數(shù)據(jù)后，啥也沒做，只是做了簡單打印

這個小栗子很簡單，通過這個小栗子，是不是對action屬性的用法有了進(jìn)一步的理解呢？

2. Method屬性

method屬性的用途是指定提交數(shù)據(jù)的http方法，通常有2個，get和post。接下來我們在上個小栗子的基礎(chǔ)上做個小改造，看下面代碼

前端代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>主機(jī)信息</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)

當(dāng)前端輸入數(shù)據(jù)后，提交表單時(shí)，直接告訴你這是不允許的方法

在這個例子中，是因?yàn)榍岸说谋韱瘟酥付薽ethod為get請求，而后端接收數(shù)據(jù)的method規(guī)定了需要post請求，故所以出現(xiàn)這個問題。

下面我們改造一下后端代碼：

# 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 '提交數(shù)據(jù)需要post請求'

if __name__ == '__main__':

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

前端表單中的method還是保持get請求，再次提交，后端的返回如下：

看到了嗎？后端判斷前端過來的請求是get還是post，很顯然，前端過來的請求是get，并且返回了非常友好的提示。

接下來我們繼續(xù)改造一下前端的代碼，將請求修改為post，代碼如下：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>主機(jī)信息</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>

后端代碼也稍微改造一下，改變接收前端數(shù)據(jù)的方法

# 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 '提交數(shù)據(jù)需要post請求'

if __name__ == '__main__':

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

輸入IP地址，并點(diǎn)擊提交

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

接下來看下后端，后端啥也沒做，就獲取到表單的數(shù)據(jù)，然后打印了數(shù)據(jù)，并且打印了下數(shù)據(jù)類型

好了，關(guān)于前端的action屬性和Method屬性就講到這里了。為了講解action和method，還結(jié)合了后端的一丟丟知識，前端和后端的知識點(diǎn)以后都會慢慢講到哈！

HTML表單常用元素

1. 下拉列表

先來個前端代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">運(yùn)維開發(fā)應(yīng)掌握的技能：</label>
            <select id="opslist" name="opslist">
                <option value="python">Python語言</option>
                <option value="go">Go語言</option>
                <option value="shell">Shell語言</option>
                <option value="database">數(shù)據(jù)庫</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">網(wǎng)絡(luò)</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 '提交數(shù)據(jù)需要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>彩虹運(yùn)維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">運(yùn)維開發(fā)應(yīng)掌握的技能：</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">數(shù)據(jù)庫</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">網(wǎng)絡(luò)</option>
                <option value="storage">存儲</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

上述前端代碼中，是使用multiple屬性來實(shí)現(xiàn)選擇多個值。

后端代碼的打印方式稍微做了些許調(diào)整：

# 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 '提交數(shù)據(jù)需要post請求'

if __name__ == '__main__':

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

按住ctrl或者shift鍵可進(jìn)行多選

后端打印的效果圖下圖：

寫在最后

關(guān)于表單基礎(chǔ)知識點(diǎn)的講解就這么愉快的結(jié)束了，關(guān)于更多表單的元素、輸入屬性、輸入類型可自行查閱和實(shí)戰(zhàn)，筆者因時(shí)間有限就不一一演示。感謝您的閱讀，望多多關(guān)注我們、點(diǎn)贊、轉(zhuǎn)發(fā)！

本文轉(zhuǎn)載于（喜歡的盆友關(guān)注我們）：https://mp.weixin.qq.com/s/L-Msv39JrF7AzRx4K1OLjA

.表單提交驗(yàn)證的幾種方法

一、submit按鈕和onsubmit事件實(shí)現(xiàn)驗(yàn)證

用戶名：<input type=“text”name=“username” />

</form>

二、button按鈕和onclick事件實(shí)現(xiàn)驗(yàn)證

用戶名：<input type=“text”name=“username” />

注意：普通按鈕的onclick的返回值，不會阻止普通按鈕的默認(rèn)動作

</form>

function checkForm()

{

var flag; //局部變量

//先做表單驗(yàn)證

If(document.form1.username.value==””)

{

flag = false;

}else

{

flag = true;

}

//判斷flag的值，如果為true，則提交表單

if(flag==true)

{

//如果為true，則提交表單，使用form對象的提交方法submit()

Window.alert(“表單驗(yàn)證通過”);

document.form1.submit();

}else

{

//如果為false，則彈出一個提示信息

Window.alert(“表單驗(yàn)證失敗”);

}

</script>

三、submit按鈕和onclick事件實(shí)現(xiàn)驗(yàn)證

用戶名：<input type=“text”name=“username” />

</form>

2.復(fù)選框?qū)ο骳heckbox

checkbox對象的屬性

name：復(fù)選框的名稱

value：復(fù)選框的值

type：復(fù)選框的類型

form：復(fù)選框所在的表單對象。如：this.form

checked：復(fù)選框是否選中

注意：在表單中，多個name的值一樣，將產(chǎn)生一個數(shù)組。

實(shí)例：全選和反選

//定義函數(shù)：當(dāng)“全選”復(fù)選框被“選中”時(shí)，所有的name=hobby都勾選

//如果“全選”復(fù)選框取消“選中”時(shí)，所有的name=hobby都取消勾選

function select_all(obj)

{

//取到name=hobby的對象，構(gòu)成的一個數(shù)組

var arr = document.form1.hobby;

//判斷“全選”的狀態(tài)

if(obj.checked)

{

//遍歷所有name=hobby對象的checked的值，并將其值設(shè)為true

for(var i=0;i<arr.length;i++)

{

arr[i].checked = true;

}

}else

{

//遍歷所有name=hobby對象的checked的值，并將其值設(shè)為false

for(var i=0;i<arr.length;i++)

{

arr[i].checked = false;

}

//定義函數(shù)：選中的項(xiàng)，變成取消；沒有選中的項(xiàng)，被選中

function select_no_all()

{

//先獲得name=hobby的所有對象

var arr = document.form1.hobby; //checked

//遍歷所有的hobby對象

for(var i=0;i<arr.length;i++)

{

if(arr[i].checked)

{

arr[i].checked = false;

}else

{

arr[i].checked = true;

}

</script>

3.上傳文件域file

對于上傳的文件要做兩方面的判斷：文件的類型(擴(kuò)展名)、文件的大小(PHP中再講)。

//定義：對上傳文件的擴(kuò)展名進(jìn)行判斷

function check_file_type(fileName)

{

//定義狀態(tài)變量

var flag = false;

//定義一個圖片擴(kuò)展名的數(shù)組

var arr = ["jpg","jpeg","png","gif"]; //dedeCMS

//重蔚自留地的.xls

//先找到最后一個小點(diǎn)的位置

//提取子字符串substr(startIndex)、substring(startIndex)

//取出上傳文件的擴(kuò)展名

var ext = fileName.substr(fileName.lastIndexOf(".")+1).toLowerCase();

//遍歷圖片數(shù)組，與取到的擴(kuò)展名，進(jìn)行比對，如果找到，則返回true

for(var i=0;i<arr.length;i++)

{

if(arr[i]==ext)

{

flag = true;

break;

}

//根據(jù)flag的值，彈出相應(yīng)的提示信息

if(flag)

{

alert("文件可以上傳");

}else

{

alert("文件類型不允許上傳");

}

</script>

4.下拉菜單對象select和option對象

</select>

select對象的屬性

options[]：所有的option構(gòu)成的一個數(shù)組。

如：edu.options[0].value = “大?！?/p>

edu.options[0].text = “大?！?

selectedIndex：默認(rèn)選中的option對象的索引號(下標(biāo))

length：指一共有多少個option對象

name：select對象的名稱

option對象的屬性

value：指option對象的值

text：指<option></option>之間的文本內(nèi)容

以上就是我今天學(xué)到的表單提交的幾種方法。跟大家一起交流。寫的不好，望大神多多指教。

在線咨詢

上一篇：Java后端應(yīng)該掌握的前端知識Vue入門（上）
下一篇：前端基礎(chǔ)入門（HTML）

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

16.HTML 表單提交

基本結(jié)構(gòu)

輸入類型

文本輸入

數(shù)值輸入

日期和時(shí)間輸入

選擇輸入

特殊輸入

驗(yàn)證方法

必填字段

正則表達(dá)式

數(shù)值范圍

長度限制

表單提交

完整例子

結(jié)論

在開篇

盤點(diǎn)HTML表單基礎(chǔ)

1. from元素

2. 單選按鈕

3. 復(fù)選框

4. 提交按鈕

HTML表單重要屬性

1. Action屬性

2. Method屬性

HTML表單常用元素

1. 下拉列表

2. 允許多選

寫在最后

.表單提交驗(yàn)證的幾種方法

2.復(fù)選框?qū)ο骳heckbox

3.上傳文件域file

4.下拉菜單對象select和option對象

您的項(xiàng)目需求