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

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

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

表單的介紹

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

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

  語法<form  屬性=”屬性值”>
           控件
      </form>
   表單的屬性
  1. Name 表單的識別名稱 一個頁面有多處表單 通過表單的識別名稱來辨認(rèn)你提交的是哪個表單的數(shù)據(jù)
<form name=” Bill”>   </form> 
<form name=” game”>  </form>
  1. Action =”XX.php” 對數(shù)據(jù)進(jìn)行處理
Action=”” 對表單中的數(shù)據(jù)處理的程序就是在當(dāng)前的文檔
  1. Method=”get/post” 把表單中的數(shù)據(jù)提交到服務(wù)器端的方法,傳遞數(shù)據(jù)的方法
  2. 方法 默認(rèn)的一種傳遞數(shù)據(jù)的方法
  通過地址來傳遞表單中的數(shù)據(jù)
  特點
  • 不能傳遞敏感的數(shù)據(jù),密碼
  • 不能傳遞大量的數(shù)據(jù),每次只能傳遞1024字節(jié)
  • 不能上傳附件
         Post 方法,不是通過地址欄傳遞數(shù)據(jù),數(shù)據(jù)傳給文件處理程序
  • 相對安全
  • 可以傳遞海量的數(shù)據(jù)
  • 能上傳附件

  控件

  • 單行文本框(單標(biāo)簽,行內(nèi)標(biāo)簽)
  語法:<input  type=”text” />
   屬性:
  • Name 單行文本框的識別名稱 ,是把輸入框中的數(shù)據(jù),提交到文件的處理程序
  • Size =”數(shù)值” 輸入框的寬度,是以字符為單位
  • Maxlength=”數(shù)值”  最多允許輸入的字符數(shù),如果超出范圍,輸入不進(jìn)去
  • Value=”內(nèi)容” 設(shè)置輸入框的初始值,在輸入框中默認(rèn)的數(shù)據(jù)信息


需求:郵箱輸入框,輸入框的顯示30個字符
      手機號輸入框,輸入框的顯示25個字符,最多允許輸入20個字符



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

              
  • 復(fù)選框 ---(多選按鈕)
語法:<input type=”checkbox” />
  屬性
  • Name 多選按鈕組的識別名稱
  • Value 初始值,設(shè)置每一項值(數(shù)據(jù))
  • Checked默認(rèn)被選中,剛打開該網(wǎng)頁就會選中該項 checked=”checked”

 自己看的代碼
點餐:          <input type="checkbox" name="order" value="紅燒肉" />紅燒肉 
                     <input type="checkbox" name="order" value="烤魚"  />烤魚
                                     <input type="checkbox" name="order" value="燕窩"  /> 燕窩
                                     <input type="checkbox" name="order" value="魚刺"  /> 魚刺
 
  • 多行文本框(雙標(biāo)簽)
  語法<textarea></textarea>
  • name 多行文本框的識別名稱
  • Value 不要出現(xiàn)value  ,如果想顯示默認(rèn)的信息,在<textarea></textarea>直接輸入
  • Rows 顯示多少行內(nèi)容 例如 rows=”10”
  • Cols 一行顯示多少個字符 例如 cols=”60”

  • 下拉列表
語法:
  • 給客戶看的內(nèi)容</option>
  • 給客戶看的內(nèi)容</option>
Select 屬性
  • name 下拉列表的識別名稱
  • value 代表 每一項的初始值

學(xué)員自己練習(xí)的代碼
   <select name=”numbere”>
      <option >請選擇企業(yè)的人數(shù)</option>
      <option >0-99</option>
<option>100-499</option>
<option>500-999</option>
   <select>
  • 隱藏域
隱藏起來,不是給客戶看,給程序用的
<input type=”hidden” name=”id1” />
 
  • 文件域
語法:<input type=”file” />
  文件域的屬性
  • Name  文件域的識別名稱
  • Value  不寫value ,而是通過單擊按鈕來選擇文件,選擇的文件就是value中,value是只讀屬性
  • 按鈕
提交按鈕
<input type=”submit” value=”按鈕上的文字” />
圖片按鈕(屬于提交按鈕的一種)
<input type=”image”src=”圖片的地址”   />
重置按鈕
<input type=”reset” value=”按鈕上的文本” />  恢復(fù)到默認(rèn)設(shè)置的狀態(tài)
普通按鈕 <input type=”button” value=”按鈕上的文字” />
本身沒有任何功能,結(jié)合程序構(gòu)成功能

Xhtml (可擴展的超文本標(biāo)記語言)-----取代 html,pc機------當(dāng)今面向的移動端設(shè)備
 語法
Xhtml 語法要比html嚴(yán)格
  • Xhtml 輸入的標(biāo)簽和屬性必須是小寫
  • Xhtml單標(biāo)簽 后必須加 / 例如<br />
  • Xhtml 屬性必須用雙引號
  • Xhtml必須有dtd(document  type  definition)文檔類型定義
Dtd (document type definition ) 文檔類型定義,是一種驗證機制,檢驗的輸入的xhtml是否符合規(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樣式來設(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/>
可以通過該網(wǎng)站地址測試dtd聲明   http://www.w3.org




本文版權(quán)歸黑馬程序員PHP培訓(xùn)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明作者出處,謝謝!
作者:黑馬程序員PHP培訓(xùn)學(xué)院
首發(fā):http://3rdspacecomics.com/news/php.html
分享到:
在線咨詢 我要報名
和我們在線交談!