HTML5中表單的創建


一、常用表單標簽如下:

 (1)<input>中的“type”屬性:

   復選框-checkbox;單選按鈕-radio;按鈕-button;提交-submit;

(2)文本域

  行-cols;列-rows;

  

<form> 表單
<input> 輸入域
<textarea> 文本域
<label> 控制標簽
<fieldset> 定義域
<legend> 域的標題
<select> 選擇列表
<optgroup> 選項組
<option> 下拉列表中的選項
<button> 按鈕

 二、常見表單標簽的應用

  1、輸入用戶名以及密碼表單的制作

    (1)主要代碼:

        <form>
              用戶名:<input type="text" />
                密碼:<input type="password" />
                <br />
         </form>

    (2)實現效果:

 

  2、復選框的使用:

    (1)主要代碼:

     <form>
            你喜歡的水果有?<br />
            蘋果<input type="checkbox" />
            西紅柿<input type="checkbox" />
            香蕉<input type="checkbox" />
            菠蘿<input type="checkbox" />
     </form>

    (2)實現效果:

 

  3、單選按鈕的使用:

    (1)主要代碼:

      <form>

       請選擇您的性別:
            男<input type="radio"  name="sex"/>
            女<input type="radio" name="sex"/>
      </form>

    (2)實現效果:

 

  4、下拉列表的使用

    (1)主要代碼

      <form>

         <select>
                <option>www.baidu.com</option>
                  <option>www.jikexueyuan.com</option>
                  <option>www.google.com</option>
              </select>

      </form>

    (2)實現效果

 

  5、按鈕的使用

    (1)主要代碼

      <form>

       <input type="button" value="按鈕" /><br />     //“value”用來定義按鈕上面的值
            <input type="submit" /> <br />
            <input type="reset" /><br /><br />        //”reset“用來重置表單里的內容
       </form>

    (2)實現效果

  

 

 

 

6、文本框的使用

    (1)主要代碼

      <textarea cols="10" rows="15">在此輸入文字</textarea>

    (2)實現效果

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM