TML提交按鈕是一種HTML表單元素,允許用戶將表單數據提交到服務器。提交按鈕通常與表單元素(如文本框和下拉列表)一起使用,以便用戶可以輸入并提交信息。在HTML中,提交按鈕通常使用標簽來定義。
如何編寫HTML提交按鈕代碼?
要創建HTML提交按鈕,您需要使用標簽,并將type屬性設置為“submit”。例如,以下代碼會創建一個名為“submit”的提交按鈕:
```
```
在這個例子中,“action”屬性指定了表單數據提交到的URL,“method”屬性指定了提交表單的HTTP方法(通常是POST或GET)。按鈕的“value”屬性指定了按鈕上顯示的文本。
如何自定義HTML提交按鈕樣式?
默認情況下,HTML提交按鈕的樣式取決于用戶的操作系統和瀏覽器。但是,您可以使用CSS樣式表來自定義按鈕的外觀。例如,以下代碼將創建一個紅色的提交按鈕:
```
```
在這個例子中,我們使用了style屬性來設置按鈕的背景顏色和文本顏色。您還可以使用其他CSS屬性來自定義按鈕的大小、邊框等。
如何使用JavaScript處理HTML提交按鈕?
您可以使用JavaScript來添加交互性和驗證表單數據。例如,以下代碼將在用戶單擊提交按鈕時彈出一個提示框:
```
```
在這個例子中,我們使用了onsubmit屬性來指定當表單提交時要運行的JavaScript函數。此函數返回true或false,如果返回false,則表單將不會提交。在這個例子中,我們使用confirm()函數顯示一個提示框,并在用戶單擊“確定”時返回true。
總結
HTML提交按鈕是Web表單中的重要元素,允許用戶將表單數據提交到服務器。您可以使用標簽來創建提交按鈕,并使用CSS樣式表自定義外觀。您還可以使用JavaScript添加交互性和驗證表單數據。通過掌握HTML提交按鈕的知識,您可以創建復雜的Web表單,并收集和處理用戶數據。
提交按鈕用來將輸入的信息提交到服務器。代碼格式如下:
<input type="submit" name="..." value="...">
其中type="submit"定義提交按鈕;name屬性定義提交按鈕的名稱;value屬性定義按鈕的顯示文字。通過提交按鈕,可以將表單的信息提交給表單里action所指向的文件。
(1)編寫代碼如下圖所示,在<body>標簽中加入以下代碼。
(2)在瀏覽器中打開文件,預覽效果圖如下所示,輸入內容按【提交】按鈕,即可將表單中的數據發送到指定的文件。
復位按鈕用來重置表單中輸入的信息。代碼格式如下:
<input type="reset" name="..." value="..." >
其中type="reset"定義復位按鈕;name屬性定義復位按鈕的名稱;value屬性定義按鈕的顯示文字。
(1)編寫代碼如下圖所示,在<body>標簽中加入以下代碼。
(2)在瀏覽器中打開文件,預覽效果圖如下所示,輸入內容后單機【重置】按鈕,即可將表單中的數據清空。
多數PHP程序都使用HTML表單從用戶那里獲取數據并計算結果。
首先創造一個基本的HTML大綱,包含表單控件;然后將控件進行合并(HTML表單必須包括一個提交按鈕,用戶單擊它可以將表單數據發送到服務器。)一個單獨的HTML頁面可以包含多個表單。
包含表單的HTML結構和和普通的HTML結構一樣。
<HTML>
<HEAD>
<TITLE>標題放在這</TITLE>
</HEAD>
<BODY>
表單頁面放在這
</BODY>
</HTML>
在包含表單的HTML頁面中可以使用任何HTML標簽?;镜谋韱问褂肍ROM標簽來說明。該標簽中METHOD屬性接收GET或POST兩個值中的一個。ACTION屬性子明PHP腳本的url,該腳本可以收集通過表單收集的數據,可以是絕對路徑或者相對路徑。
<FORM METHOD="method" ACTION="url">
中間可以放置表單控件
</FORM>
兩個常用的基本控件:文本框和提交按鈕。
文本框:允許用戶鍵入信息以發送給PHP腳本。NAME屬性為文本提供名稱,PHP腳本可以通過名稱準確訪問其內容,因此它應該是唯一的且符合PHP變量命名規則(但不需要$符號),單標簽。VALUE屬性指明出現在提交按鈕上面的標題。創建方式如下:
<INPUT TYPE = "TEXT" NAME="text">
提交按鈕:允許用戶將一個表單的內容發送到服務器,一個HTML表單對應應該有一個提交按鈕。
示例:一個完整的HTML表單。
<HTML>
<HEAD>
<TITLE>標題</TITLE>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
</FORM>
</BODY>
</HTML>
可以在一個HTML頁面中包含多個表單,注意下一個表單的FORM開始之前需要結束前一個FORM表單。
<HTML>
<HEAD>
<TITLE>標題</TITLE>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
<BR/>
<BR/>
</FORM>
<FORM METHOD="POST" NAME="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name1">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email1">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data1">
</FORM>
</BODY>
</HTML>
文本框的屬性中,TYPE和NAME是必須的,其余是可選屬性。SIZE屬性用于設置文本框的可視大小;MAXLENGTH指明用戶鍵入字符的最大長度;VALUE給出了一個最初顯示在文本框中的值。
<input type="text" name="" size="" maxlength="" value="">
文本區域可以輸入多行文本。NAME和ROWS屬性是必須的。ROWS屬性表明了文本區域內可以看到的文本行數,充滿時會滾動。COLS屬性指明可見文本列數與行數類似。WRAP屬性指明文本區域內單詞換行的方式,可以指定如下值。該標簽為雙標簽。
值 | 說明 |
off | 禁止單詞換行但用戶可以輸入換行符強制換行 |
virtual/soft | 各行顯示為換行,但是換行并沒有被發送到服務器 |
physica/hard | 啟用了單詞換行 |
<inputarea name="" rows="" cols="" wrap="">
創建密碼框的語法與文本框相同,但要將TYPE屬性指定為PASSWORD而不是TYPE。
<input type="password" name="" size="" maxlength="" value="">
取兩個值中的一個,即二選一。TYPE屬性是必須的,checked屬性出現,該復選框默認情況會被選定。value屬性指定復選框被選定情況下被發送到服務器的值,默認發送on值。法如下:
<input type="checkbox" name="" checked value="">
語法與復選框屬性含義相同,但是TYPE屬性的值必須是RADIO,NAME屬性是必須的。
<input type="radio" name="" checked value="">
用戶可以選擇一個或者多個選項,它是一個滾動菜單。
<select name="" multipile size="">options go here</select>
name屬性是必須的,multipile屬性指明用戶可以通過按下crtl鍵并單擊多個選項來選擇它們
列表框的單選行為可作為單選按鈕。
<option selected value="text"></options>
<input type="hidden" name="text"value="">
<input type="FILE" name="name" accept="time" value="text">
其中type屬性是必須的。格式通過使用MIME碼指定。常用的格式如下:
超文本標記語言文本 .html,.html text/html
普通文本 :txt text/plain
word文檔:application/msword
RTF文本 :rtf application/rtf
GIF圖形 :gif image/gif
JPEG圖形 :jpeg,
jpg: image/jpeg
au聲音文件:au audio/basic
MIDI音樂文件 :mid,.midi audio/midi,audio/x-midi
RealAudio音樂文件 .ra, .ram audio/x-pn-realaudio
MPEG文件 .mpg,.mpeg video/mpeg
AVI文件 .avi video/x-msvideo
GZIP文件 .gz application/x-gzip
壓縮文件.rar application/octet-stream
壓縮文件.zip application/x-zip-compressed
TAR文件 .tar application/x-tar
<input type="image" src="url" name="text" align="align">
<input type="reset" value="text">
*請認真填寫需求信息,我們會在24小時內與您取得聯系。