摘要:也可以通過和屬性來設置文本域的尺寸,但是屬性設置不太標準,最好的方法是通過設置。設置里默認大小的文本域實際頁面效果屬性用于設置文本域可見文本的行數。此外,屬性也適用于文本域。
1.表單元素
HTML 表單用于收集用戶輸入。
代碼示例:
常用屬性解釋:
action屬性定義在提交表單時執行的動作通常,表單會被提交到 web 服務器上的網頁。在上面的例子中,指定了某個服務器腳本來處理被提交表單.
method 屬性規定在提交表單時所用的 HTTP 方法(GET 或 POST)
2.輸入input 2.1 文本輸入框創建一個最簡單的文本輸入框:
代碼示例:
實際效果圖:
我們可以在這個文本框里面輸入任意的數字、字符或符號
代碼示例:
placeholder 屬性規定用以描述輸入字段預期值的提示,該提示會在用戶輸入值之前顯示在輸入字段中。
placeholder 屬性適用于以下輸入類型:text、search、url、tel、email 以及 password。
實際效果圖:
代碼示例:
value 屬性規定輸入字段的初始值。
實際效果圖:
代碼示例:
readonly 屬性規定輸入字段為只讀(不能修改),readonly 屬性不需要值。它等同于 readonly="readonly"。
實際效果圖:
disabled 屬性規定輸入字段是禁用的。被禁用的元素是不可用和不可點擊的。被禁用的元素不會被提交。disabled 屬性不需要值。它等同于 disabled="disabled"。
代碼示例:
maxlength 屬性規定輸入字段允許的最大長度,如設置 maxlength 屬性,則輸入控件不會接受超過所允許數的字符。
如上代碼:我們輸入超過8個文字后,再輸入任意的文字,文本輸入框都不會接收。
2.2密碼輸入框創建一個密碼輸入框,代碼示例:
實際頁面效果:
密碼輸入框的本質還是一個文本輸入框,只不過密碼輸入框在用戶輸入字段時,會自動的將輸入的文字用星號或實心圓替換,避免用戶密碼直接被其他人看到。
備注:適用在文本輸入框上的屬性同樣也適用于密碼輸入框。
2.3單選按鈕單選輸入或單選按鈕,通常用與用戶從多個選項中選擇一個。
代碼示例:
請選擇您的性別:
男 女
實際效果圖:
注意事項:
同一組選項name屬性要保持一致
選定的選項在表單數據提交時提交的格式為 nameVlaue:"selectVlaue",如上代碼表單提交時提交的值:sex:male
代碼示例:
請選擇您的性別:
男 女
checked 屬性規定按鈕是否默認選中狀態。checked 屬性不需要值。它等同于 checked="checked"。
2.4多選按鈕多選按鈕,用戶可以從多個選項中選擇一個或多個
I have a pen
I have an apple
實際效果圖:
多選按鈕也可以通過checked屬性設置多選按鈕為默認選中狀態,多選的情況下表單提交時,多選按鈕提交的值是用英文的逗號隔開的,例如如上表單在提交時, vehicle=pen&vehicle=apple
2.5.按鈕 Buttonhtml中,按鈕通常分為普通按鈕、提交按鈕、重置按鈕,其中提交和重置按鈕用于表單數據的提交和清空重置,一般放在form表單里面,普通按鈕可以隨意。
代碼示例:
實際頁面效果:
value 屬性可以設置按鈕上顯示的文字。按鈕可以可以通過disabled屬性來設置是否禁用。
表單提交按鈕通常位于form表單內,點擊后,會將用戶輸入的數據提交到指定的地址去處理
代碼示例:
實際效果圖:
備注:
上述代碼使用的是get方式提交的輸入
get方式提交數據時會在提交的目標URL地址后緊跟數據字段
value、disabled屬性也適用于submit按鈕
重置(清空)按鈕通常用于用戶輸入表單數據后一鍵清空。也需要放在form表單內使用
代碼示例:
備注:value、disabled屬性也適用于reset按鈕
3.文本域文本輸入框在用于字數不多的文本輸入時沒有什么問題,但是當用戶需要輸入多行、多字數文本時,文本輸入框就會顯得很不友好。因此多行文本的輸入,我們應該考慮使用文本域。
代碼示例:
實際頁面效果:
文本域可容納無限數量的文本,但默認的文本域視覺大小比較小,可以通過文本域右下角的“小三角”拖動來調節大小。也可以通過cols和rows屬性來設置文本域的尺寸,但是cols屬性設置不太標準,最好的方法是通過CSS設置。
3.1設置里默認大小的文本域實際頁面效果:
rows 屬性用于設置文本域可見文本的行數。
cols 屬性用于設置文本域可見區域每行文字的個數,但是這個數量因為中英文差異不太標準。
此外,placeholder name maxlength disabled 屬性也適用于文本域。
4.下拉列表下拉列表和無序列表類似,都是一種組合類型的標簽,通常用于省市區的選擇。
代碼示例:
所在城市:
實際頁面效果:
4.2默認選中某一項默認的下拉列表選中的是第一項,如果需要指定其他選項,可以通過selected屬性設置.
代碼示例:
所在城市:
實際頁面效果:
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54601.html
摘要:它可以有與元素事件相關的客戶端腳本,當事件出現時可觸發與標簽為下拉菜單,需要配合標簽一起使用,標簽為下拉菜單中的選項。通過指定標簽中的或屬性可設置為下拉菜單或是列表框用于定義多行文本域,和屬性是必須要填寫的,他們用于指定文本域的寬度和高度。 這篇文章銜接上篇,主要羅列一些前端面試中可能問到的html中最基本的問題。 (格式有點亂,內容有點水,羅列了一些基本用法,大家隨便看看) 常用標簽...
摘要:比如等行內標簽可以多個標簽共同占用一行的標簽。標準模式,瀏覽器使用的標準解析渲染頁面。顯示結果這個文本包含下標文本。表單提交項的值。表單還可以包含和標簽。html常識 什么是HTML htyper text markup language ?即超文本標記語言 超文本: 就是指頁面內可以包含圖片、鏈接,甚至音樂、程序等非文字元素。 標記語言: 標記(標簽)構成的語言. 網頁==HTML文...
摘要:今天,我們就來詳細介紹常用的標簽。標簽對文字字符進行換行處理。標簽加入水平分割線。標簽語義強調,表示重視。標簽有序列表標簽。即定義描述,用于添加該名詞的具體解釋。標簽用來顯示圖片。默認內容標簽下拉列表,以和兩個標簽配合完成。 對于很多HTML初學者來說,記憶和掌握標簽是一門很難搞的功課。今天,我們就來詳細介紹常用的HTML標簽。對于標簽的掌握,更多的是要通過練習,熟能生巧。 stlye...
摘要:但是,可以在正常的文檔主體中使用。該名稱可以用作標簽,標簽的屬性值,或標簽和標簽的屬性值。標簽元素用于為基于的表單創建交互式控件,以便接受來自用戶的數據。標簽的元素表示表格數據即通過二維數據表表示的信息。 一、常見標簽詳解 1、標簽 HTML內聯框架元素 表示嵌套的瀏覽上下文,有效地將另一個HTML頁面嵌入到當前頁面中。在HTML 4.01中,文檔可能包含頭部和正文,或頭部和框架集,...
閱讀 3398·2023-04-25 22:04
閱讀 2196·2021-11-22 15:29
閱讀 2160·2021-10-11 10:57
閱讀 1401·2021-09-24 09:48
閱讀 3146·2021-09-09 09:34
閱讀 2542·2021-09-02 15:21
閱讀 2392·2019-08-30 15:53
閱讀 1119·2019-08-30 14:07