這篇一樣會介紹一些常用的HTML標籤
老規矩,用手打不要複製貼上
1.input(收集資訊)
這個標籤需要有一個屬性叫做type
每一種不一樣的type產生出來的結果也大不相同
按鈕(button)
顧名思義,就是出現一個按鈕
按鈕的名稱由value這個屬性賦予
範例:
<html>
<head>
</head>
<body>
<input type="button" value="這是按鈕" />
</body>
</html>
其實按鈕還有另外一種寫法,就是button標籤
但是這種寫法可以利用CSS給予很多變化
所以我都是用這種標籤來創建按鈕
按鈕中的顯示文字是包含在兩個標籤當中
範例:
<html>
<head>
</head>
<body>
<button>這是按鈕</button>
</body>
</html>
記得上一篇我有說標籤中可以在擁有標籤嗎??
button標籤的另一種運用,就是在當中放入圖片
<button><img src="http://www.twstar.biz/bbs/img/G1.jpg" /></button>
複選框(checkbox)
簡單來說就是一種讓人打勾的框
通常都是用來複選用的
如果要預先勾選一些,就下checked關鍵字
範例:
<html>
<head>
</head>
<body>
<input type="checkbox" checked />我愛工程師
<input type="checkbox" />我愛站長
</body>
</html>
單選框(radio)
其實就是一種圓圓的按鈕
這種按鈕可以利用name屬性來規範單選的問題
也就是說同樣的name有三個,但是只能選一個
如果要一開始就預選一個,就跟複選框一樣加上checked
範例:
<html>
<head>
</head>
<body>
<input type="radio" name="sex" />男生
<input type="radio" name="sex" checked />女生
</body>
</html>
輸入框(text)
這個就是讓使用者打上一些資料用的
比如說註冊會員時就常常用的到
範例:
<html>
<head>
</head>
<body>
帳號:<input type="text" />
</body>
</html>
密碼框(password)
其實他就是一個輸入框
只是裡面打的東西都會是一個小黑點
用來保密用的~
範例:
<html>
<head>
</head>
<body>
密碼:<input type="password" />
</body>
</html>
檔案上傳(file)
顧名思義,就是讓使用者選擇檔案
上傳到伺服器上
他的呈現方式是一顆按鈕
如果想要一次多選,可以加上multiple="true"
不過IE好像不支援
<html>
<head>
</head>
<body>
<input type="file" value="檔案上傳" multiple="true" />
</body>
</html>
送出表單(submit)
甚麼是表單(form),等等會解釋
這顆按鈕會把使用者所輸入的資訊送到伺服器中
單獨存在其實沒有意義
範例:
<html>
<head>
</head>
<body>
<input type="submit" value="送出" />
</body>
</html>
清除表單(reset)
就是把表單中的所有東西清除,或可以解釋成恢復預設值
一樣單獨存在沒有意義
範例:
<html>
<head>
</head>
<body>
<input type="reset" value="清除" />
</body>
</html>
2.表單(form)
這個標籤的用意就是把標籤包圍內的使用者所輸入的資訊送給伺服器
需要的參數是action,這個參數決定使用者所輸入的資料要送到哪裡去
若設定為空值就是送給自己本身
另外也可以設定method要怎麼傳送,預設值是用GET,也就是把資料加在action指定的網址後面
或是使用POST,遵循HTTP協定把資料送出去,一些比較秘密的資料建議是用POST
範例(這個範例會使用到上方input):
<html>
<head>
</head>
<body>
<form action="http:www.twstar.biz/word/test.php" method="GET">
帳號：<input type="text" name="acc"/><br />
密碼：<input type="password" name="pass"/><br />
<input type="submit" value="Send"/>
<input type="reset" value="reset"/>
</form>
</body>
</html>
若是使用表單的話,那裏面的input必須要帶上name
否則伺服器那邊會抓不到值,另外在action我寫了一隻小小的程式讓你們測試
但是對於那些複選框單選框,可能顯示出來的資料會有些不一樣
這些東西在PHP的時候會教
3.下拉選單(select)
通常不使用單選框的話,也可以使用下拉選單
<html>
<head>
</head>
<body>
<select>
<option>1
<option>2
</select>
</body>
</html>
4.多行輸入框(testarea)
這個通常都是用來打上一些文章內容或是比較多的資訊
可以用rows和cols來控制大小
<html>
<head>
</head>
<body>
<textarea rows="3" cols="20"></textarea>
</body>
</html>
5.框架(iframe)
這個標籤,其實可以當作在頁面上挖出一塊位置,裡面內容是其他的網頁
比如說,網頁上方的網站導覽,網頁下方的版權宣告,如果每個頁面都寫一次
那要改的話就是每個地方都要改
但是若使用框架,只要寫一隻HTML~要用的時候載進來就好
<html>
<head>
</head>
<body>
<iframe src="http://tw.yahoo.com"></iframe>
</body>
</html>
今天打的內容算是比較偏應用方面
也就是網頁上常常會用到的東西
大家可以嘗試看看用教過的東西寫出一個會員註冊的頁面
只有動手做才能學到東西
加油!!