黑馬程序員PHP培訓(xùn)之HTML筆記03

更新時(shí)間:2017-04-13 來(lái)源:黑馬程序員PHP學(xué)院瀏覽量:

表單的介紹

可以獲取客戶端的信息（數(shù)據(jù)），表單有各種各樣的控件，輸入框，復(fù)選框按鈕等
表單的功能：交互功能
表單的工作原理：
     瀏覽有表單的頁(yè)面，填寫(xiě)必要的信息，之后單擊某個(gè)提交按鈕
     對(duì)表單中的數(shù)據(jù)進(jìn)行驗(yàn)證，如果不符合制定的要求，提示驗(yàn)證沒(méi)有通過(guò)，如果符合相應(yīng)的要求，把數(shù)據(jù)提交到服務(wù)器端，數(shù)據(jù)放入數(shù)據(jù)庫(kù)里面
     看出，表單分為前臺(tái)的制作頁(yè)面，php對(duì)數(shù)據(jù)的處理，添加到數(shù)據(jù)中，刪除數(shù)據(jù)，更改數(shù)據(jù)，查詢數(shù)據(jù)等

表單的結(jié)構(gòu)

語(yǔ)法<form 屬性=”屬性值”>
           控件
      </form>
   表單的屬性

Name 表單的識(shí)別名稱一個(gè)頁(yè)面有多處表單通過(guò)表單的識(shí)別名稱來(lái)辨認(rèn)你提交的是哪個(gè)表單的數(shù)據(jù)

Action =”XX.php” 對(duì)數(shù)據(jù)進(jìn)行處理

Action=”” 對(duì)表單中的數(shù)據(jù)處理的程序就是在當(dāng)前的文檔

Method=”get/post” 把表單中的數(shù)據(jù)提交到服務(wù)器端的方法，傳遞數(shù)據(jù)的方法
方法默認(rèn)的一種傳遞數(shù)據(jù)的方法

通過(guò)地址來(lái)傳遞表單中的數(shù)據(jù)
特點(diǎn)

不能傳遞敏感的數(shù)據(jù)，密碼
不能傳遞大量的數(shù)據(jù)，每次只能傳遞1024字節(jié)
不能上傳附件

Post 方法，不是通過(guò)地址欄傳遞數(shù)據(jù)，數(shù)據(jù)傳給文件處理程序

相對(duì)安全
可以傳遞海量的數(shù)據(jù)
能上傳附件

控件

單行文本框(單標(biāo)簽，行內(nèi)標(biāo)簽)

語(yǔ)法：<input type=”text” />
屬性：

Name 單行文本框的識(shí)別名稱，是把輸入框中的數(shù)據(jù)，提交到文件的處理程序
Size =”數(shù)值” 輸入框的寬度，是以字符為單位
Maxlength=”數(shù)值” 最多允許輸入的字符數(shù)，如果超出范圍，輸入不進(jìn)去
Value=”內(nèi)容” 設(shè)置輸入框的初始值，在輸入框中默認(rèn)的數(shù)據(jù)信息

需求：郵箱輸入框，輸入框的顯示30個(gè)字符
手機(jī)號(hào)輸入框，輸入框的顯示25個(gè)字符，最多允許輸入20個(gè)字符

可以自定義名稱，要起得有意義，命名規(guī)則（開(kāi)頭是字母或下劃線，后面可以是字母數(shù)字下劃線） name=“username”

密碼框

語(yǔ)法<input type=”password” />
密碼框的屬性：

Name 密碼框的識(shí)別名稱
Size 密碼框的寬度，以字符為單位
Maxlength允許輸入的字符數(shù)，如果超出范圍，不能輸入進(jìn)去
Value 初始值
Readonly 只讀屬性，只能選中，不能修改
Disable 禁止屬性，不能選中，不能更改（firefox為準(zhǔn)）

單選按鈕

語(yǔ)法：<input type=”radio” >
單選按鈕的屬性

Name 單選按鈕組的識(shí)別名稱
Value 設(shè)置初始值，必須得寫(xiě)，每一項(xiàng)的值

復(fù)選框 ---（多選按鈕）

語(yǔ)法：<input type=”checkbox” />
屬性

Name 多選按鈕組的識(shí)別名稱
Value 初始值，設(shè)置每一項(xiàng)值（數(shù)據(jù)）
Checked默認(rèn)被選中，剛打開(kāi)該網(wǎng)頁(yè)就會(huì)選中該項(xiàng) checked=”checked”

自己看的代碼
點(diǎn)餐：          <input type="checkbox" name="order" value="紅燒肉" />紅燒肉
                     <input type="checkbox" name="order" value="烤魚(yú)" />烤魚(yú)
                                     <input type="checkbox" name="order" value="燕窩" /> 燕窩
                                     <input type="checkbox" name="order" value="魚(yú)刺" /> 魚(yú)刺

多行文本框(雙標(biāo)簽)

語(yǔ)法：<textarea></textarea>

name 多行文本框的識(shí)別名稱
Value 不要出現(xiàn)value ，如果想顯示默認(rèn)的信息，在<textarea></textarea>直接輸入
Rows 顯示多少行內(nèi)容例如 rows=”10”
Cols 一行顯示多少個(gè)字符例如 cols=”60”

下拉列表

語(yǔ)法：

給客戶看的內(nèi)容</option>
給客戶看的內(nèi)容</option>

Select 屬性

name 下拉列表的識(shí)別名稱
value 代表每一項(xiàng)的初始值

學(xué)員自己練習(xí)的代碼
<select name=”numbere”>
      <option >請(qǐng)選擇企業(yè)的人數(shù)</option>
      <option >0-99</option>
<option>100-499</option>
<option>500-999</option>
   <select>

隱藏域

隱藏起來(lái)，不是給客戶看，給程序用的
<input type=”hidden” name=”id1” />

文件域

語(yǔ)法：<input type=”file” />
文件域的屬性

Name 文件域的識(shí)別名稱
Value 不寫(xiě)value ，而是通過(guò)單擊按鈕來(lái)選擇文件，選擇的文件就是value中，value是只讀屬性

按鈕

提交按鈕
<input type=”submit” value=”按鈕上的文字” />
圖片按鈕（屬于提交按鈕的一種）
<input type=”image”src=”圖片的地址” />
重置按鈕
<input type=”reset” value=”按鈕上的文本” /> 恢復(fù)到默認(rèn)設(shè)置的狀態(tài)
普通按鈕 <input type=”button” value=”按鈕上的文字” />
本身沒(méi)有任何功能，結(jié)合程序構(gòu)成功能

Xhtml (可擴(kuò)展的超文本標(biāo)記語(yǔ)言)-----取代 html,pc機(jī)------當(dāng)今面向的移動(dòng)端設(shè)備
語(yǔ)法
Xhtml 語(yǔ)法要比html嚴(yán)格

Xhtml 輸入的標(biāo)簽和屬性必須是小寫(xiě)
Xhtml單標(biāo)簽后必須加 / 例如<br />
Xhtml 屬性必須用雙引號(hào)
Xhtml必須有dtd（document type definition）文檔類型定義

Dtd （document type definition ）文檔類型定義，是一種驗(yàn)證機(jī)制，檢驗(yàn)的輸入的xhtml是否符合規(guī)范

的分類

      過(guò)渡型 xhtml1-transitional：允許使用表現(xiàn)的標(biāo)簽和屬性
               <b> <i> <font color=”red”> <table bordercolor=”red”>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      嚴(yán)格型: 不允許使用表現(xiàn)的標(biāo)簽和屬性
              <b> <strong> <u> <table width=”300” > 必須使用的是css樣式來(lái)設(shè)置
           <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

      框架型xhtml-frameset：給框架用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/>
可以通過(guò)該網(wǎng)站地址測(cè)試dtd聲明   http://www.w3.org