當前位置 : IT培訓網 > Web前端 > Web教程 > 如何制作html表單

如何制作html表單

時間:2016-12-02 18:14:00??來源:web前端培訓網??作者:IT培訓網??已有:名學員訪問該課程
關于html制作表單方面的知識點就介紹到這里了,如果你還不會的話,趕緊來報名吧,專家名師手把手叫你學會html表單的制作。

如何在網頁中做表單呢,對于一個網頁設計者來說,不是難事,所以今天我們針對的主要是初學者,下面就讓我們一起來學習下如何制作表單吧!

HTML 表單和輸入

HTML 表單用于搜集不同類型的用戶輸入。

HTML 表單標簽

New : HTML5新標簽

標簽

描述

<form>

定義供用戶輸入的表單

<input>

定義輸入域

<textarea>

定義文本域 (一個多行的輸入控件)

<label>

定義了 <input> 元素的標簽,一般為輸入標題

<fieldset>

定義了一組相關的表單元素,并使用外框包含起來

<legend>

定義了 <fieldset> 元素的標題

<select>

定義了下拉選項列表

<optgroup>

定義選項組

<option>

定義下拉列表中的選項

<button>

定義一個點擊按鈕

<datalist>New

指定一個預先定義的輸入控件選項列表

<keygen>New

定義了表單的密鑰對生成器字段

<output>New

定義一個計算結果

HTML 表單

表單是一個包含表單元素的區域。

表單元素是允許用戶在表單中輸入內容,比如:文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。

表單使用表單標簽 <form> 來設置:

<form>

.

input 元素

.

</form>

HTML 表單 - 輸入元素

多數情況下被用到的表單標簽是輸入標簽(<input>)。

輸入類型是由類型屬性(type)定義的。大多數經常被用到的輸入類型如下:

文本域(Text Fields

文本域通過<input type="text"> 標簽來設定,當用戶要在表單中鍵入字母、數字等內容時,就會用到文本域。

<form>

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>

瀏覽器顯示如下:

如何制作html表單_www.oalvodamoda.com

注意:表單本身并不可見。同時,在大多數瀏覽器中,文本域的缺省寬度是20個字符。

密碼字段

密碼字段通過標簽<input type="password"> 來定義:

<form>

Password: <input type="password" name="pwd">

</form>

瀏覽器顯示效果如下:

如何制作html表單_www.oalvodamoda.com

注意:密碼字段字符不會明文顯示,而是以星號或圓點替代。

單選按鈕(Radio Buttons

<input type="radio"> 標簽定義了表單單選框選項

<form>

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

瀏覽器顯示效果如下:

如何制作html表單_www.oalvodamoda.com

復選框(Checkboxes

<input type="checkbox"> 定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。

<form>

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

<input type="checkbox" name="vehicle" value="Car">I have a car

</form>

瀏覽器顯示效果如下:

如何制作html表單_www.oalvodamoda.com

提交按鈕(Submit Button)

<input type="submit"> 定義了提交按鈕.

當用戶單擊確認按鈕時,表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。:

<form name="input" action="html_form_action.php" method="get">

Username: <input type="text" name="user">

<input type="submit" value="Submit">

</form>

瀏覽器顯示效果如下:

如何制作html表單_www.oalvodamoda.com

假如您在上面的文本框內鍵入幾個字母,然后點擊確認按鈕,那么輸入數據會傳送到 "html_form_action.php" 的頁面。該頁面將顯示出輸入的結果。

關于html制作表單方面的知識點就介紹到這里了,如果你還不會的話,趕緊來報名吧,專家名師手把手叫你學會html表單的制作。

頂一下
(1)
100%
踩一下
(0)
0%
------分隔線----------------------------
------分隔線----------------------------
Web 教程
1、HTML 教程
1.1 HTML 簡介
1.2 HTML 編輯器
1.3 HTML 基礎
1.4 HTML 元素
1.5 HTML 屬性
1.6 HTML 標題
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 鏈接
1.10 HTML 頭部
1.11 HTML CSS
1.12 HTML 圖像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 區塊
1.16 HTML 布局
1.17 HTML 表單
1.18 HTML 框架
1.19 HTML 顏色
1.20 HTML 顏色名
1.21 HTML 顏色值
1.22 HTML 腳本
1.23 HTML 字符實體
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 總結
1.27 HTML 簡介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 瀏覽器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 內聯 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(視頻)
2.10 HTML5 Audio(音頻)
2.11 HTML5 Input 類型
2.12 HTML5 表單元素
2.13 HTML5 表單屬性
2.14 HTML5 語義元素
2.15 HTML5 Web 存儲
2.16 HTML5 Web SQL
2.17 HTML5 應用程序緩存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代碼規范
3、HTML 媒體
3.1 HTML 媒體(Media)
3.2 HTML 插件
3.3 HTML 音頻(Audio)
3.4 HTML視頻(Videos)播放
五月情天