表單元素(form、文本、按鈕、選擇)


表單元素

一、form

      form代表表單,功能:用於申明表單,定義采集數據的范圍,也就是<form>和</form>里面包含的數據將被提交到服務器或者電子郵件里。<form> 標簽用於為用戶輸入創建 HTML 表單。表單能夠包含input元素,比如文本字段、復選框、單選框、提交按鈕等等。表單還可以包含textarea、type、name、value等元素。表單用於向服務器傳輸數據。

1.action

    action 屬性規定當提交表單時,向何處發送表單數據,把數據提交給哪個網站。

2.method

    method表示數據提交方式,提交方式有兩種:

        get—顯式提交,有長度限制。

        post—隱式提交

3.target

    target表示提交方式,提交方式主要有以下幾項。

        _blank:在新窗口中打開。                            _parent:在父框架集中打開。

        _self:默認。在相同的框架中打開。                 _top:在指定的框架中打開。

二、文本

1.文本框<input type="text" />,其屬性有:

        value文本框的值,就是文本框里面顯示的內容。

        name文本框的名稱

2.密碼框<input type="password" />,雖然密碼框和文本框相似,但在密碼框里面輸入內容時不顯示內容,只顯示●。

3.隱藏域<input type="hidden />,隱藏域的屬性有:

        name密碼框的名稱

        value密碼框的值

4.文本域<textarea></textarea>,雙標簽元素,值不是寫在value屬性里面的,是寫在開始結束標簽之間的,現在所學內容還不能夠調整文本域的大小。示例代碼:<textarea>無言</textarea>,文本域里面就會顯示“無言”。

三、按鈕

1.普通按鈕<input type="button" />,只顯示一個按鈕,但是點上去沒有反應。

2.提交按鈕<input type="submit" />,具有提交功能。按鈕上顯示“提交”,提交按鈕的屬性有:

        name:按鈕的名字

        value:按鈕上顯示的名字。<input type="submit" value="按鈕" />,按鈕上就會顯示“按鈕”兩個字,替換了默認的“提交”。

3.重置按鈕<input type="reset" />,作用是將表單里的內容重置。

<form target="_blank" action="Untitled-3.html" method="post">
<input type="text" /> <input type="submit" /> <input type="reset" name="" value="重置" /> </form>

4.圖片按鈕<input type="image" />提交數據,其屬性有:

        name:按鈕的名字。

        src:圖片按鈕的圖片來源地址。

四、選擇

1.單選按鈕<input type="radio" />,單選按鈕的屬性有:

        name:按鈕名稱和組名

        value:按鈕的值 

<input type="radio" name="sex" value="" /><input type="radio" name="sex" value="" />女

    上面2行代碼表示單選(選男或女),input type="radio"表示此代碼為單選按鈕,name="sex"表示此2行代碼為一組。男、女為選項,只能選一個選項。

2.復選框<input type="checkbox" />,復選框的屬性有:

        name:復選框的名稱

        value:復選框的值

<input type="checkbox" name="" value="" />A
<input type="checkbox" name="" value="" />B
<input type="checkbox" name="" value="" />B
<input type="checkbox" name="" value="" />D

    上面4行代碼表示復選(多選),<input type="checkbox" />表示此組代碼為復選代碼,A、B、C、D表示4個選項,可以選1-4個選項。

3.下拉列表<select></select>雙標簽,下拉列表屬性有:

        name--下拉列表名稱

        <option></option>:代表項,就是下拉列表里的選項。

<select>
    <option>張店</option>
    <option>淄川</option>
    <option>恆台</option>
    <option>周村</option>
</select>

    上面代碼內容表示下拉列表里面有張店、淄川、恆台、周村四個選項。

    value:該項的值。

4.文件選擇<input type="file" name="" value="" />,文件選擇的屬性有:

    name--文件選擇的名稱

5.其它屬性

 ①readonly 只讀

 ②disabled  不可用,同時不能提交

 ③hidden  隱藏

 ④checked     radio  checkbox 用來做選中

 ⑤selected    用在下拉列表,設置哪一項選中


免責聲明!

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



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