首頁 > 文章 > web前端 > html基礎教學之與瀏覽者交互，表單標籤

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

零下一度原創: 2017-05-12 13:57:011470瀏覽

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

 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="服务器文件">

講解：

開始，以< ;/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、標籤是成對出現的，以<textarea>開始，以結束。

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

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

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

範例：


 联系我们
 在这里输入内容...

在瀏覽器中顯示結果：

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

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

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

在编辑器中第10行标签中补充代码cols="50" rows="10"两个属性值，cols属性控制文本域的列数，rows属性控制文本域的行数。

标签的语义一定要根据单词来记忆，这样才会扎实透彻，

preformattde：预定义格式(文本)的意思，这里的<textarea>是多行文本区域的意思，<p class="sycode">根据意思就知道不同了，而且<textarea>中的默认字样，用户可以自行更改的，<pre class="brush:php;toolbar:false">中的内容，用户只能看不能动！ 
           <br>

col与rows设定的值只会影响输入框的大小，不会影响你输入多少字

是文本域输入 <br><input>是输入一行

四、使用单选框、复选框，让用户选择

 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     <label>男</label>
11     <input type="radio" value="1"  name="gender-man" />
12     <label>女</label>
13     <input type="radio" value="2"  name="gender-woman" />
14 </form>
15 </body>
16 </html>

在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，

两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:

语法：

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

1、type:

当 type="radio" 时，控件为单选框

当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked="checked" 时，该选项被默认选中

如下面代码：

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

在浏览器中显示的结果：

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

注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。

来试一试：修改单选框代码错误（男、女可以同时选择），使其具有单选作用。

1、在编辑器中第11行、13行代码有错误，请改正。

记住：

1、同一组单选框name命名要一致。

2、你是否输入像下面的代码：

<label>男</label>
<input type="radio" value="1"  name="gender" />
<label>女</label>
<input type="radio" value="2"  name="gender" />

五、使用下拉列表框，节省空间

 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     <select>
11       <option value="看书">看书</option>
12       <option value="旅游">旅游</option>
13       <option value="运动">运动</option>
14       <option value="购物">购物</option>
15     </select>
16 </form>
17 </body>
18 </html>

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码：

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