社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > html教學 > html基礎教學之與瀏覽者交互，表單標籤

html基礎教學之與瀏覽者交互，表單標籤

零下一度
發布： 2017-05-12 13:57:01
原創
1547 人瀏覽過

一、使用表單標籤，與使用者互動

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>表单标签</title>
 6 </head>
 7 <body>
 8 <form>
 9       <label for="username">用户名:</label>
10       <input type="text"  name="username" id="username" value="" />
11       <label for="pass">密码:</label>
12       <input type="password"  name="pass" id="pass" value="" />    
13       <input type="submit" value="确定"  name="submit" />
14       <input type="reset" value="重置" name="reset" />
15 </form>  
16 </body>
17 </html>
登入後複製

網站如何與使用者互動？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的資料傳送到伺服器端，這樣伺服器端程式就可以處理表單傳過來的資料。

語法：

<form method="传送方式" action="服务器文件">
登入後複製

講解：

1.

：標籤是成對出現的，以開始，以< ;/form>結束。

2.action ：瀏覽者輸入的資料傳送到的地方,例如一個PHP頁面(save.php)。

3.method ： 資料傳送的方式（get/post）。 post是加密傳輸；get為網址列傳輸，也就是不加密傳輸。 

<form    method="post"   action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
</form>
登入後複製

注意:

1、所有表單控制項（文字方塊、文字網域、按鈕、單選方塊、複選框框等）都必須放在

標籤之間（否則使用者輸入的資訊可提交不到伺服器上喔！）。

2、method : post/get 的差異這一部分內容屬於後端程式設計師所考慮的問題。

 試試看：在編輯器中的第8行

標籤中加入程式碼：

method="post" action="save.php"
登入後複製

你是不是輸入像如下程式碼：

html基礎教學之與瀏覽者交互，表單標籤

text：文字方塊password：密碼方塊 raido：單選按鈕 checkbox：複選框file：檔案選擇框submit：提交按鈕

當你按了label中的文字，可以讓文字與控件聯繫在一起用"for"屬性將label與另一個元素綁在一起，"for"屬性值應該和相關的元素"id"屬性值相同。

二、文字輸入框、密碼輸入框

 1 
 2 
 3 
 4 
 5 文本输入框、密码输入框
 6 
 7 
 8 
 9     账户: 
10     
11     

12     密码: 
13 
14  
15 
16
登入後複製

當使用者要在表單中鍵入字母、數字等內容時，就會用到文字輸入框。文字方塊也可以轉換為密碼輸入框。

語法：

<form>
   <input type="text/password" name="名称" value="文本" />
</form>
登入後複製

1、type：

   當type="text"時，輸入方塊為文字輸入方塊;

   當type=" password"時, 輸入框為密碼輸入框。

2、name：為文字方塊命名，以備後台程式ASP 、PHP使用。

3、value：為文字輸入框設定預設值。 (一般起到提示作用)

範例：

<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密码：
  <input type="password" name="pass">
</form>
登入後複製

#     

在瀏覽器中顯示的結果：

html基礎教學之與瀏覽者交互，表單標籤

試試看：為表單插入姓名、密碼輸入框

1.在編輯器中第10行輸入代碼：

<input  type="text"  name="myName" />
登入後複製

2.在編輯器中第13行輸入代碼： 

<input  type="password"  name="pass" />
登入後複製

屬性之間至少有一空格.

hidden 定義隱藏輸入欄位
image 定義映像為提交按鈕
number 定義帶有spinner 控制項的數字欄位
password定義密碼欄位。欄位中的字元會被遮蔽
radio 定義單選按鈕
range 定義帶有 slider 控制項的數字欄位
reset 定義重設按鈕。重置按鈕會將所有表單欄位重設為初始值
search 定義用於搜尋的文字欄位
submit 定義提交按鈕。提交按鈕向伺服器發送資料
text 預設。定義單行輸入字段，使用者可在其中輸入文字。預設是20 個字元
url 定義用於URL 的文字欄位

居然有人說現在很少用value了，估計初學者都不知道placeholder是H5的新屬性，並且IE6到IE9是不支援原生的placeholder的。

如果只使用placeholder而不解決相容性問題（要用placeholder得加入長段相容性程式碼為代價），只能說你是在隨便看看，而不是在工作。

(紅色字為評論區內容，有的暫時看不懂)

三、文字域，支援多行文字輸入

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>文本域</title>
 6 </head>
 7 <body>
 8 <form action="save.php" method="post" >
 9     <label>个人简介：</label>
10     <textarea>在这里输入内容...</textarea>
11     <input type="submit" value="确定"  name="submit" />
12     <input type="reset" value="重置"  name="reset" />
13 </form> 
14 </body>
15 </html>
登入後複製

當使用者需要在表單中輸入大段文字時，需要用到文字輸入域。

語法：

<textarea  rows="行数" cols="列数">文本</textarea>
登入後複製

1、結束。

2、cols ：多行輸入域的列數。

3、rows ：多行輸入域的行數。

4、在標籤之間可以輸入預設值。

範例：
登入後複製

在瀏覽器中顯示結果：

html基礎教學之與瀏覽者交互，表單標籤

注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。

来试一试：修改文本域的列数和行数

在编辑器中第10行