tft每日頭條

 > 生活

 > web前端表單總結案例

web前端表單總結案例

生活 更新时间:2024-08-06 15:11:38

上篇介紹了表單的使用,表單有很多控件,比如輸入框,密碼框、文本域,按鈕等。按類型可分如下:

  • 輸入類控件
  • 菜單類控件
輸入類組件 —— input

此類控件有很多種類型,使用<input type="類型">語法,常見類型如下:

type 值

含義

text

文字字段

password

密碼域,用戶看不到明文,以*代替

radio

單選按鈕

checkbox

多選按鈕

button

普通按鈕

submit

提交按鈕

reset

重置按鈕

image

圖像域,用圖像作為背景的提交按鈕

hidden

隐藏域,不可見的輸入框

file

文本域,用于上傳文件等非文本數據

文本輸入框和密碼框

除了顯示形式不一樣,其它屬性一樣,有以下屬性:

  • name —— 定義文字字段名稱,用于和其它控件區别,不能包含特殊字符,也不可使用html 标簽名稱
  • maxlength —— 定義文本框可輸入字符最大長度
  • size —— 定義文本框在頁面中顯示的長度
  • vaule —— 定義文本框中默認的值

如下是文本輸入框和密碼框制作一個登錄表單

html代碼:

<!DOCTYPE html> <html> <body> <h1>用戶登錄</h1> <form action="/demo/html/action_page.php"> <label for="fname">用戶名:</label><br> <input type="text" id="username" name="username" value=""><br> <label for="lname">密碼:</label><br> <input type="password" id="pwsd" name="pwsd" value=""><br><br> <input type="submit" value="提交"> </form> </body> </html>

顯示效果:

web前端表單總結案例(前端入門html)1

html5 輸入類型

除了以上幾種類型,HTML5 還增加了多個新的輸入類型:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

如下代碼:

<!DOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> 數字類型(1 到 5 之間): <input type="number" name="quantity" min="1" max="5"> IE9 及早期版本不支持 type="number"。<br> color 選擇顔色: <input type="color" name="color"><br> 生日: <input type="date" name="bday"><br> 年月: <input type="month" name="bdaymonth"><br> 年周: <input type="week" name="week_year"><br> 時間: <input type="time" name="usr_time"><br> 一定範圍 <input type="range" name="points" min="0" max="10"><br> E-mail: <input type="email" name="email"> 能夠在被提交時自動對電子郵件地址進行驗證<br> 搜索: <input type="search" name="googlesearch"><br> 電話: <input type="tel" name="usrtel"> 目前隻有 Safari 8 支持 tel 類型。<br> url: <input type="url" name="url"> 提交時能夠自動驗證 url 字段<br> <input type="submit"> </form> </body> </html>

效果如下:

web前端表單總結案例(前端入門html)2

單選和多選按鈕

使用 type = “radio” 和 type =“checkbox” 定義是單選還是多選,除了name和value屬性外,單選和多選都有一個 checked屬性定義默認選擇的項,checked = “true”指選中那個選項,表單會将 checked = “true” 的選型值傳遞給後台。

如下實例:

<!DOCTYPE html> <html> <body> <h4>單選和多選</h4> <form action="/demo/demo_form.asp"> 水果: <input type="radio" name="shuiguo" value="banner" checked> 香蕉 <input type="radio" name="shuiguo" value="apple"> 蘋果 <br><br> 省份: <input type="checkbox" name="shengfen" value="shannxi" checked> 陝西 <input type="checkbox" name="shengfen" value="sanxi"> 山西 <input type="checkbox" name="shengfen" value="gdong"> 廣東 <br><br> <input type="submit"> </form> </body> </html>

顯示效果:

web前端表單總結案例(前端入門html)3

單選和多選傳遞給後台的數據是不一樣的,如下會看到地址欄中的數據,多選會發送多個值,後台将會獲取一個數組形式的數據。

/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi

普通按鈕、提交按鈕、重置按鈕

普通按鈕:type = “button”,一般配合腳本使用,語法如下:

<input type="button" name="名稱" value="按鈕值" onclick="腳本程序" />

value 值就是按鈕在頁面顯示的文字,onclick屬性定義了腳本事件,這裡指單擊按鈕時所進行的處理。

如下示例:

<!DOCTYPE html> <html> <body> <form> <input type="button" value="普通按鈕"> <input type="button" value="打開窗口" onclick="window.open()"> <input type="button" value="您好" onclick="alert('您好')"> </form> </body> </html>

web前端表單總結案例(前端入門html)4

web前端表單總結案例(前端入門html)5

單擊您好按鈕

提交按鈕:type = “submit”,用于提交表單内容,是一種特殊按鈕。

如剛才的登錄表單,提交後會返回結果:

web前端表單總結案例(前端入門html)6

重置按鈕:type="reset",用于清除表單數據,也是一種特殊按鈕。

web前端表單總結案例(前端入門html)7

輸入數據

點擊重置按鈕後,表單數據清空

web前端表單總結案例(前端入門html)8

重置清空數據

HTML5 按鈕

除了使用input定義按鈕,還可以使用 html5 新增的<button> 标簽定義按鈕,button 使用語法如下:

<form action="/demo/html/action_page.php"> <button type="button">普通按鈕</button> <button type="submit">提交按鈕</button> </form>

其它輸入類控件

隐藏域 —— hidden文件域 —— file

如下示例:

<form action="/demo/html/action_page.php"> <label for="fname">隐藏域:</label> <input type="hidden" id="hidden" name="hidden" value=""><br> <label for="lname">文件域:</label> <input type="file" id="file" name="file" value=""><br> <input type="submit" value="提交"> </form>

顯示效果

web前端表單總結案例(前端入門html)9

可以看到,隐藏域在頁面中不顯示,單擊文件域選擇文件按鈕可以選擇文件,比如word文件,電子表格文件等,會以非文本方式傳送到後台的,常用來實現文件上傳功能。

文本域 —— textarea

除了input 類型的控件,還有文本域 textarea ,一種特殊的文本框,它與input 文本輸入框的區别就是可以輸入多行文字,input 文本輸入框是單行的無法輸入多行文字。

如下示例:

<p>textarea 元素定義多行輸入字段。</p> <form action="/demo/html/action_page.php"> <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea> <br><br> <input type="submit"> </form>

效果如下:

web前端表單總結案例(前端入門html)10

rows 屬性定義文本域的高度是幾行,cols 定義文本域寬度占幾列,比如上面定義了高10行寬30列的文本域。

下拉菜單和多選列表

下拉菜單作用和單選按鈕類似,隻不過它更加節省空間,當要選擇的選型很多時,就不适合使用radio空間,所以當選項很多的時候,使用下拉菜單,語法如下:

<select name="名稱"> <option value="選項值1" selected>選項1</option> <option value="選項值2">選項3</option> 更多option...... </select>

多選列表和多選按鈕類似,一樣為了節省空間,當數據選項比較多時,使用多選列表,語法如下:

<select name="名稱" size="可看見的列表項數" multiple> <option value="選項值1" selected>選項1</option> <option value="選項值2">選項3</option> 更多option...... </select>

多選比下拉菜單不同之處是多了一個multiple屬性,定義多選的,且表現形式也不一樣,不是下拉而是一個列表。

如下代碼:

<!DOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> 下拉菜單:<br> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <br> 多選列表:<br> <select name="cars" size="3" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <br><br> <input type="submit"> </form> </body> </html>

顯示效果:

web前端表單總結案例(前端入門html)11

這裡需要注意的是,多選列表多選時需要按住ctrl鍵同時鼠标單擊選擇才能多選,效果如下:

web前端表單總結案例(前端入門html)12

到這裡,已介紹了大部分的表單控件,現在你可以使用他們制作自己的表單,表單通常在動态網站中使用,這為以後制作動态網站打下基礎。

還有許多屬性沒有講到,比如html5新增的一些屬性和功能,可自行參考 w3cshool 等網站學習,感謝關注,學習愉快!

上篇 : 前端入門——html 表單

下篇: 前端入門 —— 網頁中使用窗口框架

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved