整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
Input Text 對象
Input Text 對象代表 HTML 中 type="text" 的 <input> 元素。
訪問 Input Text 對象
你可以通過 getElementById() 訪問 type="text" 的 <input> 元素：
var x=document.getElementById("myText");嘗試一下
提示： 同樣，你可以通過查找表單 elements 集合來訪問 Input Text 對象。
創建 Input Text 對象
你可以通過 document.createElement() 方法來創建 type="text" 的 <input> 元素:
var x=document.createElement("INPUT");
x.setAttribute("type", "text");
Input Text 對象屬性
=HTML5 新增屬性。
| 屬性 | 描述 |
|---|---|
| autocomplete | 設置或返回文本域的 autocomplete 屬性值 |
| autofocus | 在頁面加載后設置或返回文本域是否自動獲取焦點 |
| defaultValue | 設置或返回文本域的默認值 |
| disabled | 設置或返回文本域是否禁用 |
| form | 返回一個對包含文本域的表單對象的引用 |
| list | 返回一個對包含文本域的選項列表對象的引用 |
| maxLength | 設置或返回文本域中的最大字符數 |
| name | 設置或返回文本域的名稱 |
| pattern | 設置或返回文本域的 pattern 屬性值 |
| placeholder | 設置或返回文本域的 placeholder 屬性值 |
| readOnly | 設置或返回文本域是否應是只讀的 |
| required | 設置或返回 whether the text field must be filled out before submitting a form |
| size | 設置或返回文本域的 size 屬性值 |
| type | 返回文本域的表單元素類型 |
| value | 設置或返回文本域的 value 屬性值 |
Input Text 對象方法
| 方法 | 描述 |
|---|---|
| blur() | 從文本域中移除焦點 |
| focus() | 讓文本域獲取焦點 |
| select() | 選取文本域的內容 |
標準屬性和事件
Input Text 對象同樣支持標準 屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
單屬性匯總：
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
單是PHP程序中最常使用的收集站點訪問者信息的數據輸入界面。通過表單瀏覽器獲取用戶的輸入數據，并傳送給Web服務器的腳本程序中，以各種不同的方式進行處理。在表單中提供了多種輸入方式，包括文本輸入域、單選或多選按鈕、下拉式列表域等。表單是網頁上由<form>標簽定義的一個特定區域，而表單的各種輸入域可以由<input>、<select>和<textarea> 3個標簽定義。
1 表單標簽<form>
一個表單用<form></form>標簽來創建，即定義表單的開始和結束位置，在開始和結束標簽之間的一切定義都屬于表單的內容。單擊提交按鈕時，提交的也是表單范圍之內的內容。另外，在<form>標簽中需要攜帶表單的相關信息，例如處理表單的腳本程序的位置、提交表單的方法等。這些信息對于瀏覽者是不可見的，但對于處理表單卻有著決定性的作用。該標簽的常用屬性如表1所示。
表1 HTML表單標簽中常用的屬性
<form>標簽中必須加action屬性，并且不能為空。例如，<form action="login.php" method="post">。如果不需要使用action屬性，也必須定義：<form action="no">。
2 文本域和密碼域
在<form>標簽內定義的<input>標簽具有重要的地位，該標簽是單個標簽，沒有結束標記。<input type="">標簽用來定義一個用戶輸入區，用戶可以在其中輸入信息。<input>標簽中共提供了9種類型的輸入區域，具體是哪一種類型由type屬性來決定。文本和密碼輸入域是一個單行文本框，它們基本相似，唯一不同的是，用戶在密碼域中輸入的字符并不以原樣顯示，而是將每個字符用“*”代替。文本和密碼輸入域的基本語法格式如下：
<input type="text" name="field_name" value="field_value" size="n" maxlength="n"> <!-- 輸入域 -->
<input type="password" name="field_name" value="field_value" size="n" maxlength="n"> <!-- 密碼域 -->
這些屬性的含義如表2所示。
表2 HTML中<input>標簽的常用屬性z
3 提交、重置和普通按鈕
在<input>標簽中，當type屬性值為“submit”時，表示這是一個提交按鈕，單擊提交按鈕后，可以實現表單內容的提交；當type屬性為“reset”時，表示這是一個重置按鈕，單擊重置按鈕后，表單的內容將恢復為默認值；當type屬性為“button”時，表示這是一個普通按鈕，并不實現任何功能，需要和JavaScript等腳本語言一起使用。button按鈕必須定義在form之間，否則Netscape瀏覽器不支持。這3種按鈕的基本語法格式如下：
<input type="submit" name="field_name" value="field_value"> <!-- 提交按鈕 -->
<input type="reset" name="field_name" value="field_value"> <!-- 重置按鈕 -->
<input type="button" name="field_name" value="field_value"> <!-- 普通按鈕 -->
4 單選按鈕和復選框
單選按鈕和復選框都有“選中”和“未選中”兩種狀態。同一組單選按鈕如果有多個選擇框，則選擇框之間是相互排斥的，只允許用戶選擇其中的一個。復選框和單選按鈕的區別是，復選框允許用戶同時選中同一表單中的多個或全部選項，當然，也可以只選其中的一個選項。它們都是只有在“選中”時，數據才能被提交到服務器端。其語法格式如下所示：
<input type="radio" name="field_name" value="field_value" checked> <!-- 單選按鈕 -->
<input type="checkbox" name="field_name" value="field_value" checked> <!-- 復選框 -->
在<input>標簽中，當type屬性值為“checkbox”時，表示這是一個復選框輸入域；當type屬性值為“radio”時，則表示這是一個單選按鈕輸入域。但在同一組中的多個單選按鈕名稱必須相同，它們之間才能相互排斥。單選按鈕和復選框都可以通過checked屬性設置為選中狀態。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
