HTML筆記-第三天

更新時間:2016年09月08日15時56分來源:傳智播客PHP培訓學院瀏覽次數(shù):

表單的介紹

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

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

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

Name 表單的識別名稱一個頁面有多處表單通過表單的識別名稱來辨認你提交的是哪個表單的數(shù)據(jù)

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

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

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

通過地址來傳遞表單中的數(shù)據(jù)
特點

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

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

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

控件

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

語法：<input type=”text” />
屬性：

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

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

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

密碼框

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

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

單選按鈕

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

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

復選框 ---（多選按鈕）

語法：<input type=”checkbox” />
屬性

Name 多選按鈕組的識別名稱
Value 初始值，設(shè)置每一項值（數(shù)據(jù)）
Checked默認被選中，剛打開該網(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="魚刺" /> 魚刺

多行文本框(雙標簽)

語法：<textarea></textarea>

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

下拉列表

語法：

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

Select 屬性

name 下拉列表的識別名稱
value 代表每一項的初始值

學員自己練習的代碼
<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=”按鈕上的文本” /> 恢復到默認設(shè)置的狀態(tài)
普通按鈕 <input type=”button” value=”按鈕上的文字” />
本身沒有任何功能，結(jié)合程序構(gòu)成功能

Xhtml (可擴展的超文本標記語言)-----取代 html,pc機------當今面向的移動端設(shè)備
語法
Xhtml 語法要比html嚴格

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

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

的分類

      過渡型 xhtml1-transitional：允許使用表現(xiàn)的標簽和屬性
               <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">
      嚴格型: 不允許使用表現(xiàn)的標簽和屬性
              <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