HTML標記之Form表單

阿豪聊乾貨發表於2016-02-22

一、表單的作用

  從訪問的Web站點的使用者那裡獲得資訊。訪問者可以使用諸如文字域、列表框、核取方塊以及單選按鈕之類的表單元素輸入資訊,然後單擊某個按鈕提交這些資訊。是客戶端與伺服器端的交流途徑。

二、說明

  Form標記用於建立一個表單,定義一個表單的開始與結束,他是一個容器,用於包含其他元素,例如文字框、單選框等。表單元素必須在form標記內才有作用。

  語法:

    <form action=url(傳送目標,處理表單資訊的伺服器端應用程式)  method=處理表單的方式(post/get)預設為get, name=”表單名”>

      表單元素

    </form>

  注意:post方法可以傳遞大量資訊,get將值附加到請求的url中,適合少量的資訊。  

三、表單元素標記

  ①.單行文字

    <input name=”文字框名稱” type=”text” value=”初始值” size=“顯示字元數” maxlength=“最多容納字元數”readonly=”readonly”(設定為只讀) disable=”disable”(設定為不可操作)  ></input>  

  ②.密碼框 

    <input name=”文字框名稱” type=”password” value=”初始值” size=“顯示字元數”></input>

  .單選框 

    <input name=”文字框名” type=”radio” value=” 提交值” checked=”checked”(是否被選中) ></input>,

  ④.核取方塊

    <input name=”文字框名” type=”checkbox” value=”提交值” checked=checked></input>

  ⑤.下拉框

    單選下拉框:

    <select name=”下拉框名”>

      <option selected=”selected” (那個是初始選擇就新增) value=”提交值”>列表1</option>

      <option>列表2</option>

    </select>

    (<optgrounp label=”分組名稱”><option></option></optgrounp>用來做有子項的下拉框)  

    多選下拉框:

     <select name="下拉框名字" size="顯示的行數" multiple="multiple"> //multiple:表示允許多選

        <option value="提交值">顯示值</option>

          。。。。

      </select>

四、表單元素標籤分類

  1.<label >標註內容</label>標籤:為input元素定義標註(標記)<label>標籤的for屬性應當與相關元素id相同

  如:<input type=”redio” name=”sex” id=”man”><label for=”man”></label>就把input標籤和label標籤關聯在一起。 

  2.按鈕

    語法:<input type="按鈕型別:reset[重置表單]、submit[提交表單]、button[普通按鈕]、" name="按鈕名稱" value="按鈕顯示文字"> 

  3.圖片按鈕

    語法:<input type="image" name="按鈕名稱" src="圖片路徑" />

  4.隱藏域:

    語法:<input type="hidden" value="隱藏域的值" />

  5.多行文字

    語法:<textarea name="多行文字框名稱" cols="每行中的字元數" rows="顯示的行數"></textarea>

  6.檔案框

    語法:<input type="file" name="檔案框名稱" size="顯示長度"/>

  7.表單外框

    語法:<fieldset></fieldset>定義圍繞表單中元素的邊框

       <legend></legend>為fieldset元素定義標題

   8.動畫插入

    語法:<embed src="動畫地址" width="寬度" height="高度" wmode="transparent:使flash背景部分透明"></embed>

   9.滾動字幕

    語法:<marqueen

        direction="滾動方向:left[左]、right[右]、up[上]、down[下]"

        behavior="滾動方式:scroll[一圈一圈繞著走]、slide[只走一次]、alternate[來回]"

        loop="滾動的迴圈次數,若未指定則迴圈不止(loop="infinite")"

        bgcolor="背景顏色"

        onMouseOver="this.stop(),滑鼠進入暫停"

        onMouseOut="this.start(),滑鼠離開繼續"

        scorllamount="滾動速度,值越大,速度越快"

        scrolldelay="延時,走一走,停一停"

      ></marqueen>

    10.內嵌框架元素

      語法:<frameset rows="行高及行數" cols="列數及列寬" framespacing="框架間距"

            frameborder="框架邊框設定:yes/no,1/0" border="邊框寬度" bordercolor="邊框顏色">

            <frame src="被包含的檔案路徑及名稱" name="框架名稱" noresize="是否允許改變框架大小,true/false" scroll="滾動條顯示控制,yes/no/auto">

         </frameset>

相關文章