全國(guó)咨詢(xún)/投訴熱線(xiàn)：400-618-4000

首頁(yè)技術(shù)文章正文

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

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

表單的介紹

可以獲取客戶(hù)端的信息（數(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ù)，查詢(xún)數(shù)據(jù)等

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

  語(yǔ)法<form  屬性=”屬性值”>
           控件
      </form>
   表單的屬性
  1. Name 表單的識(shí)別名稱(chēng) 一個(gè)頁(yè)面有多處表單 通過(guò)表單的識(shí)別名稱(chēng)來(lái)辨認(rèn)你提交的是哪個(gè)表單的數(shù)據(jù)
<form name=” Bill”>   </form> 
<form name=” game”>  </form>
  1. Action =”XX.php” 對(duì)數(shù)據(jù)進(jìn)行處理
Action=”” 對(duì)表單中的數(shù)據(jù)處理的程序就是在當(dāng)前的文檔
  1. Method=”get/post” 把表單中的數(shù)據(jù)提交到服務(wù)器端的方法，傳遞數(shù)據(jù)的方法
  2. 方法 默認(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í)別名稱(chēng) ，是把輸入框中的數(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è)字符



   可以自定義名稱(chēng)，要起得有意義，命名規(guī)則（開(kāi)頭是字母或下劃線(xiàn)，后面可以是字母 數(shù)字 下劃線(xiàn)） name=“username”
  • 密碼框
語(yǔ)法<input type=”password” />
   密碼框的屬性：
  • Name 密碼框的識(shí)別名稱(chēng)
  • Size 密碼框的寬度，以字符為單位
  • Maxlength允許輸入的字符數(shù)，如果超出范圍，不能輸入進(jìn)去
  • Value 初始值
  • Readonly  只讀屬性，只能選中，不能修改
  • Disable 禁止屬性，不能選中，不能更改 （firefox為準(zhǔn)）
  • 單選按鈕
語(yǔ)法：<input type=”radio” >
單選按鈕的屬性
  • Name 單選按鈕組的識(shí)別名稱(chēng)
  • Value 設(shè)置初始值，必須得寫(xiě)，每一項(xiàng)的值

              
  • 復(fù)選框 ---（多選按鈕）
語(yǔ)法：<input type=”checkbox” />
  屬性
  • Name 多選按鈕組的識(shí)別名稱(chēng)
  • 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í)別名稱(chēng)
  • Value 不要出現(xiàn)value  ，如果想顯示默認(rèn)的信息，在<textarea></textarea>直接輸入
  • Rows 顯示多少行內(nèi)容 例如 rows=”10”
  • Cols 一行顯示多少個(gè)字符 例如 cols=”60”

  • 下拉列表
語(yǔ)法：
  • 給客戶(hù)看的內(nèi)容</option>
  • 給客戶(hù)看的內(nèi)容</option>
Select 屬性
  • name 下拉列表的識(shí)別名稱(chēng)
  • 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)，不是給客戶(hù)看，給程序用的
<input type=”hidden” name=”id1” />
 
  • 文件域
語(yǔ)法：<input type=”file” />
  文件域的屬性
  • Name  文件域的識(shí)別名稱(chēng)
  • 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）文檔類(lèi)型定義
Dtd （document type definition ） 文檔類(lèi)型定義，是一種驗(yàn)證機(jī)制，檢驗(yàn)的輸入的xhtml是否符合規(guī)范
  • 的分類(lèi)
      過(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




本文版權(quán)歸黑馬程序員PHP培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處，謝謝！
作者：黑馬程序員PHP培訓(xùn)學(xué)院
首發(fā)：http://www.pantone-color.com.cn/news/php.html
分享到：
在線(xiàn)咨詢(xún) 我要報(bào)名
和我們?cè)诰€(xiàn)交談！