HTML網頁製作基礎第七彈


昨天學習的表格標籤遠遠不止我所說的這些內容,大家要多去搜索一下相關的知識點。今天就學習一下表單標籤的相關內容吧


那麼我們今天接着學習新的標和者標籤屬性吧

form表單元素

創建表單後我們就可以在表單中放置空間以接受用戶的輸入。這些空間通常房子form標籤之中,也可以在表單之外用來創建用戶界面。在網絡上我們經常見到一些控件。例如,我們每次登陸用到的賬號輸入框和密碼輸入框。不同的表單控件有不同的用途。如果要求用戶輸入的僅僅是一些文字信息,我們一般用單行文本框和多行文本框。如果需要在性別上選擇一般是單選按鈕。


<form>標籤用於在網頁中創建表單區域,屬於一個容器標籤,表示其他表單標籤需要在它的包圍中才有效,


代碼示例:

<html>

  <head>

   <title>

        My Page

   </title>

  </head>

  <body>

<form action="1.html" method="get">

賬號:<input type="text" name="loginId"/><br>

密碼:<input type="password" name="passWord"/>

<br><input type="submit" value="註冊"/>

</form>

</body>

</html>


效果顯示:


在上面的示例代碼中action 後面的值代表需要提交的地址,會將你表單中輸入的值傳遞過去。

method代表表單提交的時候使用什麼方式提交,提交方式有get,post

input 用來創建各種表單元素,type的值用來表單需要穿件元素的類型。


表單的細節

介紹一下常用的元素屬性;

type 此屬性指定表單勻速的類型,可用的選項有:text,password,checkbox,radio,submit,reset,file.hidden,image和buton.默認的選擇是text。


name 此屬性指定表單勻速的名稱,例如,如果表單上有幾個文本框,可以按名稱來表示它們,如text1,text2.名稱性的作用域微form元素內。


value 此屬性是可選屬性,它指定表單元素的初始值,但是如果type微radio,則必須指定一個值


size 此屬性指定表單元素的初始寬度,如果type微text或者password,則表單元素大小以字符爲單位。


maxlenght 此屬性永愛制動可在text或者password元素中輸入的最大字符數。默認值爲無限大。


checked 此屬性是boolean屬性,指定按鈕是否是被選中的,當輸入類型爲radio或者chaeckbox時,使用此屬性。


這裏就不一一演示了,大大也可以自己聯繫一下

樣子例:

<input type="text" name="text1" value="文本框" maxlength="5" />

表單中常用的表單元素

文本框:

在表單中最常用,最常見的表單輸入元素就是文本框,它提供給用戶輸入單行文本信息,例如用戶名的輸入框。如要在文檔的表單裏創建一個文本框,將表單元素type屬性設置爲text即可。

代碼例子:賬號:<input type="text"/>


密碼框:

密碼在大家認知中,輸入密碼是不是都是用*代替,如果用text的話用戶在文本框中輸入的值一覽無餘,這樣很不安全,所以我們可以將type的屬性值設置爲password

代碼例子:密碼:<input type="password"/>


效果示例:


單選按鈕:

單選按鈕作用於一組相互排斥的值,組中每個單選按鈕控件應具有相同的名稱,用戶一次只能選擇一個選項。只有從組中選擇的單選按鈕纔會在提交的數據中生成name/value對,單選按鈕需要一個顯示的value屬性


代碼示例:

男<input type="radio" value="男"  name="gen" checked="checked" />

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


注意如果要實現單選功能,單選按鈕的那麼值必須一致,表單提交時候提交的值是value


複選按鈕:

複選框的創建方式和單選框是一樣的,只需要將type的值改爲checkbox就可以創建複選按鈕也就是多選框


<input type="checkbox" value="1" name="a"/>

<input type="checkbox" value="2" name="b"/>


多選框與單選框不同表單提交的值是name的屬性值。


大家在form表單中單擊提交按鈕的時候可以發現地址欄中的地址有我們自己加入的屬性和屬性值:

如果上面的例子提交結果:


我用submit提交的值是多選按鈕的第二個,所以在網址後面有一個b=2

下面我提交兩個多選框同時選中的提交結果:



那麼今天的內容就到這裏吧!大家明天見,每天學習一點,每天進步一點。

聽雨HTML基礎QQ交流羣:577919336,大家有興趣的可以進羣交流一下。

或者有問題去聽雨的博客反應:

博客地址:http://blog.csdn.net/dx15618816293  

附(因爲聽雨電腦的原因,可能有時很多尾標籤的/沒有敲上去,所以如果大家是直接複製我的源碼過去的話可能無法顯示,建議大家還是自己敲一敲。記住一般情況下標籤都是有頭標籤和尾標籤的。)




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