表單標籤製作一般的登錄界面

表單標籤簡介:

功能:提交數據到某服務器

<form></form>:定義一個表單範圍

   屬性:action:提交到地址,默認提交到當前頁面

               method:表單提交方式:get(默認)和post

                         get和post的區別:(1)get請求地址欄會攜帶提交的數據,post不攜帶提交的數據

                                                            (2)get請求安全性低,post較高

                                                            (3)get請求數據大小有限制,post沒有限制

輸入項:

功能:可以輸入內容或者選擇內容的部分

大部分的輸入項使用<input type="輸入項"/>,在每個輸入項裏面需要一個name屬性

a.普通輸入項:<input type="text"/>

b.密碼輸入項:<input type="password"/>

c.單選輸入項:<input type="radio"/>

                          --需要屬性name

                          --name屬性值必須相同

                          --必須有一個value值

              *實現默認選中項:設置屬性checked=“checked”

d.複選輸入項:<input type="checkbox"/>

  --需要屬性name

                          --name屬性值必須相同

                          --必須有一個value值

              *實現默認選中項:設置屬性checked=“checked”

e.文件輸入項:<input type="file"/>

f.下拉輸入項:(不是在input標籤中實現)

       <select name="  ">

                 <option  value = " ">選項一</option>

                <option  value = " ">選項二</option>

       </select>

g.文本域:<textarea  cols = "10"  rows = "10">文本內容</textarea>

h.隱藏項:(不會出項在頁面上,但是存在於html代碼中)

               <input type = "hidden"/>

i.提交按鈕:

            <input type = "submit"  value = “顯示內容“  />  

j.使用圖片提交:

           <input type = "image"  src= “圖片路徑“  /> 

k.重置按鈕:

          <input type = "reset"  value = “ 重置註冊“  /> 

            ---重置是回到輸入項的初始狀態

l.普通按鈕:

            <input type = "button"  value = “    “  />

          -----和js一起使用

所有的標籤字符都是在英文字符的情況下輸入

舉一個栗子

運行結果:




源碼:

<html>
  <head>
     <title> 表單實例  </title>
  </head>
  <body>
       <font size="5"color="#000000" ><b>免費開通人人網賬號</b></font>
       <form>
       <table borber="1" bordercolor="#000000">
          <tr>
          <td>註冊郵箱:</td>
          <td><input type="text"/></td>
          </tr>
          <tr>
          <td> </td>       <!--單元格佔位符是什麼???-->
          <td>你還可以使用賬號<a href="#">註冊</a>或者<a href="#">手機號註冊</a></td>
          </tr>
          <tr>
          <td align="right">創建密碼: </td>      
          <td><input type="password"></td>
          </tr>
          <tr>
          <td align="right"> 真實姓名:</td>     
          <td><input type="text"></td>
          </tr>
           <tr>
           <td align="right">性別:</td>
          <td> <input type="radio" name="sex" value="nv"/checked=“checked”>女<input type="radio" name="sex" value="nan"/>男</td>      
          </tr>
          <tr>
          <td align="right"> 生日:</td>     
          <td>
              <select name="year">
              <option value="1991" selected="selected">1991</option>
              <option value="1992">1992</option>
              <option value="1993">1993</option>
              </select>
              <select name="month">
              <option value="1"selected="selected">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              </select>
              <select>
              <option value="1"selected="selected">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              </select>
          </td>
          </tr>
          <tr>
          <td align="right">我現在:</td>
          <td>  
          <select name="work">
          <option value="study"selected="selected">我正在上學</option>
          <option value="work">我已經工作</option>
          </select>
          </td>
          </tr>
          <tr>
          <td></td>
          <td><img src="表單標籤.html/picture.gif"/></td>
          <td> <a href="#">看不清換一張</a></td>
          </tr>
          <tr>
          <td align="right">驗證碼:</td>
          <td><input type="text" name="yanzhengma"></td>
          </tr>
          <tr>
          <td></td>
          <td><input type="image" src="Hydrangeas.jpeg"/></td>
          </tr>
       </table>
       </form>
  </body>
</html>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章