HTML CSS基礎課程學習(3)

2021-08-11 03:28:49 字數 2617 閱讀 4517

課程**看這裡~

乙個網頁上不僅有我們要給使用者看的內容,也需要與使用者進行互動,此時我們需要使用html表單。

html表單的功能為把使用者輸入的資料傳送到伺服器端,以便伺服器端處理資料。語法如下:

其中:

type:當type=

"text"時,輸入框為文字輸入框;

當type=

"password"時, 輸入框為密碼輸入框。

name:為文字框命名,以備後台程式使用

value:為文字輸入框設定預設值。(一般起到提示作用)

當我們需要輸入大段文字時,乙個文字框是不夠的,這時我們需要使用支援多行文字輸入的文字域。

語法如下:

rows="行數"

cols="列數">文字textarea>

其中:標籤是成對出現的,以開始,以textarea>結束,在,textarea>標籤之間可以輸入預設值。

cols :多行輸入域的列數。

rows :多行輸入域的行數。

注:cols與rows屬性可用css樣式的width和height來代替:col用width、row用height來代替。(這兩個css樣式在後續更新中會講解)

2:單選框與核取方塊

html中有兩種選擇框,即單選框和核取方塊,兩者的區別是單選框中的選項使用者只能選擇一項,而核取方塊中使用者可以任意選擇多項,甚至全選。

語法如下:

type=

"radio/checkbox"

value="值" name="名稱" checked="checked"/>

其中:type:當 type=

"radio" 時,控制項為單選框

當 type=

"checkbox" 時,控制項為核取方塊

value:提交資料到伺服器的值,以備後台程式使用

name:為控制項命名,以備後台程式使用

checked:當設定 checked="checked" 時,該選項被預設選中

注:同一組的單選按鈕,name 取值一定要一致!這樣同一組的單選按鈕才可以起到單選的作用。

3:下拉列表

網頁中我們常常用到下拉列表,它可以有效節省網頁空間,可以單選亦可以多選,例子如下:

其中:

value:value="提交值">選項(顯示的值)option>

selected="selected":設定預設選中選項。

若要進行多選,則在標籤中設定multiple=」multiple」屬性,在windows作業系統中按下ctrl鍵的同時單擊選中表項(mac作業系統下使用command+單擊),例子如下:

name="iform">

愛好:label>

multiple="multiple">

value="讀書">讀書option>

value="運動">運動option>

value="**">**option>

value="旅遊">旅遊option>

value="購物">購物option>

select>

form>

4:提交與重置按鈕

表項完成後需要進行提交,此時我們需要用到提交按鈕

語法如下:

type=

"submit"

value="提交">

其中:type:只有當type值設定為submit時,按鈕才有提交作用

value:按鈕上顯示的文字

舉個例子:

當type設定為reset時,按鈕有重置作用,即,當我們資訊輸入錯誤時可以點重置按鈕進行重置操作,然後進行常規操作。

語法如下:

type=

"reset"

value="重置">

其中:type:只有當type值設定為reset時,按鈕才有重置作用

value:按鈕上顯示的文字

例子如下:

5:label標籤

在上述例子中我們多次用到標籤,現在我們就來學習它的具體用法。

label標籤不呈現任何特殊效果,它的作用是為滑鼠使用者改進了可用性。就是說,當使用者單擊選中該label標籤時,瀏覽器就會自動將焦點轉到和標籤相關的表單控制項上(就自動選中和該label標籤相關連的表單控制項上)。具體語法如下:

for="控制項id名稱">

for="male">男label>

type="radio"

name="gender"

id="male" />

for="female">女label>

type="radio"

name="gender"

id="female" />

for="email">輸入你的郵箱位址label>

type="email"

id="email"

placeholder="enter email">

form>

更多功能請期待後續更新博文!

HTML CSS基礎課程(一)

一 給div命名 語法 二 table標籤,製作網頁上的 建立 的四個元素 table tbody tr th td 1 標記開始 標記結束 3 的一行,所以有幾對tr 就有幾行 4 的乙個單元格,一行中包含幾對.說明一行中就有幾列 5 的頭部的乙個單元格,表頭 6 中列的個數,取決於一行中資料單元...

HTML CSS基礎課程(四)

一 文字輸入框 密碼輸入框 當使用者要在表單中鍵入字母 數字等內容時,就會用到文字輸入框。文字框也可以轉化為密碼輸入框。語法 1 type 當type text 時,輸入框為文字輸入框 當type password 時,輸入框為密碼輸入框 2 name 為文字框命名,以備後台程式asp php使用。...

慕課網HTML CSS基礎課程學習

慕課網html css基礎課程 為了做好乙個功能全面的 我開始從零開始學習,第一步先學習html css,js學習之後也會更新。網頁主要由html哪些標籤構成 人是由頭和身體構成,同樣的網頁也是由 頭 和 身體 構成,頭 是head,文件的頭部描述了文件的各種屬性和資訊,包括文件的標題等 身體 是b...