天天看點

web前端學習-------表單的應用

web前端學習-------表單的應用

     這樣的登入頁面經常會見到,但要這些控件發揮作用,不隻是單單把它們敲打出來,放在那裡,還要在一個叫做<form>表單标記裡面,才能發揮它的作用。

     今天主要說的是<form>表單标記,以及會涉及到的相關控件。

    一、基本文法:

             <form action=“url位址” method="送出資料的方法" name="表單名稱">

    二、-<form>屬性:

                 1.action:指定處理表單資料的伺服器url位址

                  2.method:表單資料的送出方式,有get和post兩種方法。get:在傳遞資訊的過程中,使用者可以清晰的看見資料,是以這種方法不安全。post:浏覽器會分段将資料傳送給伺服器,這種方法很安全。

   三、表單控件

       <input/>:表單輸入控件

      <textarea></textarea>:多行文本輸入框

      <select></select>:下拉清單框

1、input

      (1)、<label for="">使用者名:</label><input type="text"  size="7"  />( size是input控件在頁面顯示的寬度)

web前端學習-------表單的應用

  (2)

web前端學習-------表單的應用
web前端學習-------表單的應用

  (3)

web前端學習-------表單的應用
web前端學習-------表單的應用

注意:同一組的單選框的name的必須相同,單選框才能生效。

(4)<input type="checkbox" name="籃球"/>籃球

         <input type="checkbox" name="排球"/>排球

         <input type="checkbox" name="足球"/>足球

web前端學習-------表單的應用

(5)<input type="sumit" value="登入" />

web前端學習-------表單的應用

(6)、<input type="reset">

web前端學習-------表單的應用

2、<select></select>屬性:size="可見選項數" multiple="multiple"

web前端學習-------表單的應用
web前端學習-------表單的應用

3、<textarea cols="每行中的字元數" rows="顯示的行數"></textarea>

web前端學習-------表單的應用

    4、   <meter max="500" value="250" min="0" class="text" ></meter><br />

web前端學習-------表單的應用

以下是個人做的一個小作業

web前端學習-------表單的應用
web前端學習-------表單的應用
web前端學習-------表單的應用

效果圖:

web前端學習-------表單的應用

繼續閱讀