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

營銷<input>元素用來定義用戶輸入數(shù)據(jù)的輸入字段,根據(jù)不同的type屬性,輸入字段可以是文本字段、密碼字段、復(fù)選框、單選鈕、按鈕、隱藏域、電子郵件、日期時間、數(shù)值、范圍、圖像、文件等。<input元素的基本語法及格式為:<input type="表項類型" name="表項名" value="默認(rèn)值"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屬性:當(dāng)頁面加載時是否預(yù)先選擇該input元素(適用于type="checkbox"或type="radio")。

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

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

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

required屬性:設(shè)置必須輸入字段的值。

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

readonly屬性:設(shè)置字段的值無法修改。

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

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

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

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

1、文字和密碼的輸入

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

2、重置和提交

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

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

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

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

當(dāng)省略value的設(shè)置值時,重置和提交的按鈕分別顯示為“重置”和“提交”

3、復(fù)選框和單選鈕

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

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

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

4,電子郵件輸入框

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

5、日期時間選擇器

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

date:選取日、月、年。

month:選取月、年。

week:選取周和年。

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

datetime:選取時間日、月、年(UTC世界標(biāo)準(zhǔn)時間)。

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

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

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