前端 表單和輸入(單選、多選、單行輸入等)


HTML 表單和輸入


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>

瀏覽器顯示如下:

First name: 
Last name: 

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


密碼字段

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

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

瀏覽器顯示效果如下:

Password: 

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


單選按鈕(Radio Buttons)

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

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

瀏覽器顯示效果如下:

Male
Female

復選框(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>

瀏覽器顯示效果如下:

I have a bike
I have a car

提交按鈕(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>

瀏覽器顯示效果如下:

Username: 

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

 


 

HTML <script> 標簽

<script> 標簽用於定義客戶端腳本,比如 JavaScript。

<script> 元素既可包含腳本語句,也可通過 src 屬性指向外部腳本文件。

JavaScript 最常用於圖片操作、表單驗證以及內容動態更新。

下面的腳本會向瀏覽器輸出"Hello World!":

<script> document.write("Hello World!"); </script>


 

HTML 表單標簽

New : HTML5新標簽

 

標簽 描述
<form> 定義供用戶輸入的表單
<input> 定義輸入域
<textarea> 定義文本域 (一個多行的輸入控件)
<label> 定義了 <input> 元素的標簽,一般為輸入標題
<fieldset> 定義了一組相關的表單元素,並使用外框包含起來
<legend> 定義了 <fieldset> 元素的標題
<select> 定義了下拉選項列表
<optgroup> 定義選項組
<option> 定義下拉列表中的選項
<button> 定義一個點擊按鈕
<datalist>New 指定一個預先定義的輸入控件選項列表
<keygen>New 定義了表單的密鑰對生成器字段
<output>New 定義一個計算結果


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM