營銷型網(wǎng)站建設<inpup>元素

營銷<input>元素用來定義用戶輸入數(shù)據(jù)的輸入字段,根據(jù)不同的type屬性,輸入字段可以是文本字段、密碼字段、復選框、單選鈕、按鈕、隱藏域、電子郵件、日期時間、數(shù)值、范圍、圖像、文件等。<input元素的基本語法及格式為:<input type="表項類型" name="表項名" value="默認值"size="x" maxlength="y"><input>元素常用屬性的含義如下。

type屬性:指定要加入表單項目的類型(text, password, checkbox, radio, button, hidden,email, date pickers, number, range, image, file, submit或reset等)。

name屬性:該表項的控制名,主要在處理表單時起作用。

size屬性:輸入字段中的可見字符數(shù)。

maxlength屬性:允許輸入的最大字符數(shù)目。

checked屬性:當頁面加載時是否預先選擇該input元素(適用于type="checkbox"或type="radio")。

step屬性:輸入字段的合法數(shù)字間隔。

max屬性:輸入字段的最大值。

min屬性:輸入字段的最小值。

required屬性:設置必須輸入字段的值。

pattern屬性:輸入字段的值的模式或格式。

readonly屬性:設置字段的值無法修改。

placeholder屬性:設置用戶填寫輸入字段的提示。

autocomplete屬性:設置是否使用輸入字段的自動完成功能。

autofocus屬性:設置輸入字段在頁面加載時是否獲得焦點(不適用于type-"hidden")。

disabled屬性:設置當頁面加載時是否禁用該input元素(不適用于type-"hidden")。

1、文字和密碼的輸入

使用<input元素的type屬性,可以在網(wǎng)站表單中加入表項,并控制表項的風格。如果type屬性值為text,則輸入的文本以標準的字符顯示;如果type屬性值為password,則輸入的文本顯示為“*",在表項前應加入表項的名稱,如“您的姓名”等,以告訴瀏覽者在隨后的表項中應該輸入的內(nèi)容。文本框和密碼框的格式為:<input types"text" name="文本框名"><input type-"password"name="密碼框名"

2、重置和提交

如果瀏覽者想清除輸入到表單中的全部內(nèi)容,可以使用<input>元素中的type屬性設置重置(reset)按鈕,以省去在重新輸入前,一項一項刪除的麻煩;當瀏覽者完成表單的填寫,想要發(fā)送時,可使用<input元素的type屬性設置的提交(submit)按鈕,將表單內(nèi)容送給action屬性中的網(wǎng)址或函件信箱;如果瀏覽者想制作一個普通的按鈕,可使用<input元素的type屬性設置普通(button)按鈕。三種按鈕的格式為:

<input type="reset" value="按鈕名">

<input type-"submit"value="按鈕名">

<input type="button" value-"按鈕名">

當省略value的設置值時,重置和提交的按鈕分別顯示為“重置”和“提交”

3、復選框和單選鈕

在頁面中有些地方需要列出幾個項目,讓瀏覽者通過選擇鈕來選擇項目。選擇鈕可以是復選框(checkbox)或單選鈕(radio)。用<input元素的type屬性可設置選擇鈕的類型; value屬性可設置該選擇鈕的控制初值,用來告訴表單制作者選擇結(jié)果;用checked屬性表示是否為默認選中項; name屬性是控制名,同一組的選擇鈕的控制名是一樣的。復選框和單選鈕的格式為：

<input type="checkbox" name-"復選框名" value-"提交值">.

<input type="radio" name="單選鈕名"value="提交值">

4,電子郵件輸入框

當用戶需要通過營銷型網(wǎng)站建設表單提交電子郵件信息時,可以將<input>元素的type屬性設置為email類型,即設計用于包含email地址的輸入框。當用戶提交表單時,會自動驗證輸入email值的合法性。格式為:<input type-"email" name="電子郵件輸入框名">

5、日期時間選擇器

HTML5提供了日期時間選擇器date pickers,擁有多個可供選取日期和時間的新型輸入文本框，類型如下。

date:選取日、月、年。

month:選取月、年。

week:選取周和年。

time:選取時間(小時和分鐘)。

datetime:選取時間日、月、年(UTC世界標準時間)。

datetime-local:選取時間日、月、年(本地時間)。

日期時間選擇器的語法格式為:

<input type"選擇器類型" name="選擇器名">