單屬性匯總:
1 name屬性
服務器會識別不同的name屬性,并根據name屬性來捕獲不同元素內的數據。
2 value屬性
value 屬性為 input 元素設定值。
對于不同的輸入類型,value 屬性的用法也不同:
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關聯的值
注釋:<input type="checkbox"> 和 <input type="radio"> 中必須設置 value 屬性。
注釋:value 屬性無法與 <input type="file"> 一同使用。
注意:單選框和復選框傳遞數據到數據庫時一定要設置value, 否則插入數據失敗;
3 type屬性
它決定了<input>標簽在頁面中的表現樣式和功能
text 文本框
password 密碼框
radio 單選框
checkbox 復選框
file 文件域
hidden 隱藏域
image 圖像域
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
4 size屬性
列表框中size屬性用來設置列表框顯示的行數;
文本框和密碼框會使用size屬性設置域的顯示寬度;
5 disabled屬性
定義disabled屬性可以禁止使用該元素;
無法將數據提交到服務器處理;
6 readonly屬性
常用在輸入性表單對象中(如文本框、密碼框、文本區域),用來禁止輸入任何信息;
可以將數據提交到服務器處理;
7 checked屬性
它與disabled屬性一樣沒有屬性值,常用在選擇性表單對象中,定義對象處于被選中狀態(如單選按鈕和復選框)
但在列表框或者下拉式菜單中,為了表示被選中的項目,可使用selected屬性;
7 placeholder屬性
規定幫助用戶填寫輸入字段的提示。
表單對象:
1 文本框
<input type="text" name="textfield" id="textfield" value="單行文本框" size="20" maxlength="20">
必需的屬性:name type
2 密碼域
<input type="password" name="passwordfield" id="passwordfield">
必需的屬性:name type
3 文本域
<textarea name="textarea" cols="20" rows="5" wrap="physical"></textarea>
必需的屬性:name cols rows
wrap屬性 默認值:輸入的文本會自動換行。當數據提交到服務器被處理時, 換行符不會隨輸入的文本一同被提交到服務器;
off(也可寫成wrap):不自動換行, 當輸入的內容超出文本區域右邊界時, 文本將向左滾動, 并顯示滾動條。
如果希望換行,必須手動輸入回車鍵才能將插入點移到下一行;
virtual:文本能夠自動換行, 當數據提交到服務器被處理時, 換行符不會隨輸入文本一同提交到服務器;(默認值)
physical:文本能夠自動換行, 當數據提交到服務器被處理時, 換行符將會隨輸入的文本一同被提交到服務器進行處理;
關于如何限制文本域輸入字符串的長度 見javascript|語法|設置文本框
HTML5中wrap中屬性值修改為hard|soft
soft 當在表單中提交時, textarea 中的文本不換行, 默認值。
hard 當在表單中提交時, textarea 中的文本換行(包含換行符)。
當使用 "hard" 時, 必須規定 cols 屬性
4 單選按鈕
單選按鈕傳遞的信息簡單,如1或0、True或False。
<input type="radio" name="radio" value="1"/>選項1
<input type="radio" name="radio" value="2"/>選項2
<input type="radio" name="radio" value="3"/>選項3
多個單選按鈕通過定義相同的name屬性, 以實現捆綁在一起;
必需的屬性:type name value
5 復選框
<input type="checkbox" name="checkbox[]" value="1"/>選項2
<input type="checkbox" name="checkbox[]" value="2"/>選項2
<input type="checkbox" name="checkbox[]" value="3"/>選項2
通過設置相同的name屬性可以把多個復選框捆綁在一起;
必需的屬性:type name value
6 列表框/下拉菜單
<select name="select" size=1>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>
如果select元素中不設置size屬性,則該元素會顯示為下拉菜單樣式
<select name="select" size="1" multiple="multiple">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>
如果希望以列表框形式顯示,則可以使用size屬性指定列表框的高度(顯示幾個選項);
還可以通過mutiple屬性定義列表框是否為多選(默認是單選);
通過<optgroup>標簽把相關的選項組合在一起:
<select>
<optgroup label="PHP版塊">
<option value ="resource">資源共享</option>
<option value ="study">學習交流</option>
<option value ="salary">薪酬待遇</option>
</optgroup>
<optgroup label="IOS版塊">
<option value ="resource">資源共享</option>
<option value ="study">學習交流</option>
<option value ="salary">薪酬待遇</option>
</optgroup>
</select>
注意:其中PHP版塊和IOS版塊不能被選中
所有主流瀏覽器都支持 <optgroup> 標簽。
7 文件域
<input type="file" name="file"/>
<input type="file" name="file" multiple/>
8 按鈕
提交按鈕
<input type="submit" name="" value="提交"/>
name值必須給出
重置按鈕
<input type="reset" name="" value="重置"/>
普通按鈕
<input type="button" name="" value="普通按鈕"/>
它一般是配合javascript來使用;
關于控制表單提交按鈕見: javascript|語法|控制表單提交
9 圖像域
<input type="image" name="image" value="提交" src="images/vote_d.gif" alt="提交" align="middle"/>
10 隱藏域
限制上傳文件大小
<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
傳遞ID值
<input type="hidden" name="id" value="<?php echo $result['id'];?>" />
11 button標簽
在 button 元素內部,您可以放置內容,比如文本或圖像。這是該元素與使用 input 元素創建的按鈕之間的不同之處。
<button type="button" name="button" value="按鈕"><img src="hw001.jpeg"/></button>
普通按鈕<button type="button">普通按鈕</button> 它一般是配合javascript來使用, 默認值
提交按鈕<button type="submit">提交按鈕</button>
重置按鈕<button type="reset">重置按鈕</button>
提交表單
enctype屬性
該屬性包含兩種方式:
application/x-www-form-urlencoded 是默認編碼類型
multipart/form-data
multipart/form-data編碼方式可以用來傳輸二進制數據或者非ASCII字符的文本(如圖片、不同格式的文件等),上傳文件必須使用此屬性
multipart: 多部件的
multiple: 多重的
text/plain
text/plain將表單屬性發送到電子郵箱時,enctype的值必須設為"text/plain",否則將會出現亂碼。
發送電子郵件的表單程序
<form name="form1" method="post" action="mailto:marker@broadview.com.cn" enctype="text/plain">
</form>
action 表單提交的腳本
如果傳遞到本頁面,則直接輸入控制 action=""
表單提交方式method:post/get
<form action="test.php?id=5" method="post" >
name: <input type="text" name="name" value="100">
</form>
id=5是get傳, name="100" 是post傳! //高洛峰解釋
action="" 表示傳遞到當前腳本文件
target 指定提交到哪一個窗口
_blank 打開新窗口
_self 當前的窗口,默認值
_parent 上一層窗口
_top 最上層窗口
框架名稱 指定指定窗口或框架名稱
label標簽
作用: 擴大觸控區域, 為了提升用戶體驗, 點擊文字也能選中表單
<form action=" method="get" accept-charset="utf-8">
<label>電子郵箱: <input type="text" name="email" value="" placeholder="請輸入電子郵箱"/></label><br/>
<label>密碼: <input type="password" name="password"/></label><br/>
<label for="address">地址</label>
<input type="text" name="address" id="address" placeholder="請輸入地址" />
</form>
for與id一致
<input type="radio" id="sec" name="sex"> <label for="sex">男</label>
簡化寫法:
<label><input type="checkbox"/>周杰倫-晴天</label>
注意: "for" 屬性可把 label 綁定到另外一個元素。請把"for"屬性的值設置為相關元素的 id 屬性的值。
PHP實例:創建發送郵件信息的html表單
代碼:
<html>
<head>
<title>簡單郵件發送表單</title>
</head>
<body>
<h1>Mail Form</h1>
<form name="form1" method="post" action="simpleEmail.php">
<table>
<tr><td><b>To</b></td><td><input type="text" name="mailto" size="35"></td></tr>
<tr><td><b>郵件主題:</b></td>
<td><input type="text" name="mailsubject" size="35"></td></tr>
<tr><td><b>郵件內容</b></td>
<td><textarea name="mailbody" cols="50" rows="7"></textarea></td>
</tr>
<tr><td colspan="2">
<input type="submit" name="Submit" value="發送">
</td>
</tr>
</table>
</form>
</body>
</html>
simpleEmail.php
鏈接標簽是HTML頁面中最為常見,而且用途最廣的一個標簽,只要我們瀏覽網頁,就會有超鏈接。比如,通過點擊新聞標題鏈接到新聞詳情頁面,通過點擊商品名稱鏈接到商品列表或者詳情頁等等。
anchor , 錨
在HTML中創建超鏈接,只需用a標簽包括被鏈接的對象
<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>
href:用于指定鏈接目標的url地址,必須屬性
target:用于指定鏈接頁面的打開方式,其取值有 self和 _blank兩種,其中 _self為默認值,_blank為在新窗口中打開方式
(1)當需要鏈接到 外部鏈接時,需要添加 http://
(2)當需要內部鏈接時,直接鏈接內部頁面名稱即可 如 < a href=“index.html”> 首頁
(3)如果暫時沒確定鏈接目標時,一般將href屬性值定義為“#”,表示暫時為一個空鏈接
(4)不僅可以創建文本超鏈接,在網頁中各種網頁元素,如圖像、表格、音頻、視頻等都可以添加超鏈 接, 只要用a標簽包括即可
在當前html頁面上,通過創建錨點鏈接,用戶能夠快速定位到指定內容。
適用于內容較多的頁面,通過點擊關鍵詞,可以快速到達指定區域。
(1)使用唯一的id標注目標位置
(2)使用<a href="#id名“>鏈接文本創建鏈接
在html頁面中,有些符號直接添加是無法正常顯示的,這個時候就用一些特殊的標簽來表示這類符號,而這類特殊的標簽,我們就叫做特殊字符標簽。
在HTML中,Id屬性是一個非常重要的元素,它可以為網頁上的每個元素提供一個獨特的標識符。通過Id屬性,您可以精準地定位和操作特定的HTML元素,從而實現更細致的樣式控制和交互功能。本文將為您揭示Id屬性的魔力,教您如何利用它來打造出與眾不同的網頁體驗。
Id屬性的值必須在整個HTML文檔中是唯一的,這使它成為定位和操作特定元素的理想選擇。通常情況下,我們會為頁面中的重要元素如頁頭、導航欄、主內容區域等分別設置Id。
<header id="header">
<nav id="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">關于我們</a></li>
</ul>
</nav>
</header>
<main id="main">
<section id="hero">
<h1>歡迎來到我的網站</h1>
<p>這里是網站的主要內容區域</p>
</section>
</main>
有了Id屬性,您可以在CSS中直接針對特定元素進行樣式定制。這種精準的選擇器使您能夠更好地控制網頁的視覺效果。
#header {
background-color: #333;
color: #fff;
padding: 20px;
}
#nav ul {
list-style-type: none;
display: flex;
}
#nav li a {
color: #fff;
text-decoration: none;
padding: 10px 20px;
}
#hero {
background-color: #f2f2f2;
padding: 50px;
text-align: center;
}
除了CSS,Id屬性在JavaScript中也扮演著重要的角色。通過Id,您可以快速地獲取和操作特定的HTML元素,實現各種交互效果。
<button id="myButton">點擊我</button>
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
alert('您點擊了按鈕!');
});
在使用Id屬性時,有幾個需要注意的最佳實踐:
總之,HTML Id屬性是一個非常強大的工具,它可以為網頁元素提供獨特的標識,從而幫助您實現精細化的樣式控制和交互功能。只要掌握好它的用法,相信您一定能打造出令人驚嘆的網頁作品。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。