表單賦值 HTML入門2表單元素

2021-10-13 15:56:02 字數 2928 閱讀 9719

1.type="text">即表示文字框,不需要寫成或,這樣,包含「size」「value」「placeholder(背景文字文字框)」等屬性,但框裡的內容只能輸一行,想要多行輸入,需要使用文字域。

初始示例:type="text">

屬性size示例:type="text" size="10">

屬性value示例:type="text" size="10" value="有初始值的文字框">

屬性placeholder示例:type="text" size="12" placeholder="有背景文字的文字框">

未加屬性效果:

屬性size效果:

屬性value效果:

屬性placeholder效果:

2.即文字域,文字域可以多行輸入,而且可以有滾動條,包含cols和rows屬性

未加屬性示例:123 456 

789 

使用屬性cols(寬度)和rows(行數)示例:"20" rows="6">123456789

1231

1233

1234

1233

1236

未加屬性效果:

使用屬性cols (寬度) 和rows(行數)效果:

type="password">即表示密碼框,輸入的數字會自動顯示為星號

執行示例:type="password" value="123456789">

執行效果:

用於向伺服器提交資料,比如賬號密碼,提交資料常用method="get"和method="post"兩種提交方式,前一種是form預設的,提交資料會在瀏覽器上顯示出來,不可以上傳檔案,後一種必須通過method="post"語句指定,提交資料不會在瀏覽器上顯示出來,可以提交檔案等二進位制資料。"https">

賬號:type="text" name="name">

密碼:type="password" name="password">

atype="radio" name="四選一">

btype="radio" name="四選一">

ctype="radio" name="四選一">

dtype="radio" name="四選一">

預設選中示例:type="radio" checked="checked">

多選效果:ab

cd單選效果:ab

cd預設選中效果:

type="checkbox">即表示核取方塊

吃飯type="checkbox" value="吃飯">

學習type="checkbox" value="學習" >

玩手機type="checkbox" value="玩手機">

睡覺type="checkbox" value="睡覺 value">

核取方塊效果:

吃飯學習

玩手機睡覺

即下拉列表,需要配合使用,有siae、selected等屬性

未加屬性示例:張三李四王麻子

size高度屬性示例:"2">張三李四王麻子

multiple多選屬性示例:"4" multiple="multiple">張三李四王麻子

預設選中屬性示例:"multiple">"selected">張三"selected">李四王麻子

未加屬性效果:

size高度屬性效果:張三李四王麻子

multiple多選屬性效果:張三李四王麻子

預設選中屬性效果:張三李四王麻子

按鈕分為普通按鈕,提交按鈕,重置按鈕三種

按鈕標籤有兩種和type="",不同之處是前一種button裡面可以是文字、、也可以提交資料。

普通按鈕

type="submit">提交

"登入 .png">定義

type="img" src="登入 .png">

type="button">即普通按鈕,普通按鈕不能提交資料,即不能用於登入等按鈕

type="submit">即為提交按鈕,用於提交form,把資料提交至伺服器

type="reset">即為重置按鈕,可以把輸入框的改動復原

賬號:type="text" name="name">

密碼:type="password" name="password">type="submit" value="登入">type="reset" value="重置">type="button" value="普通按鈕">

button標籤示範效果:

普通按鈕提交

type=""示範效果:

賬號:

密碼:

type="image" src="">即使用影象作為按鈕進行form的提交

賬號:type="text" name="name">

密碼:type="password" name="password">type="image" src="登入 .png">

賬號:

密碼:

"en"> 

"utf-8">

"viewport" content="width=device-width, initial-scale=1.0">

document

"">

效果如下:

HTML表單元素 表單控制項

html是部署在伺服器上的文字檔案根據http協議,瀏覽器發出請求給伺服器,伺服器做出響應,給瀏覽器返回乙個html瀏覽器解釋執行html,從而顯示出內容 html部署在伺服器上,執行在瀏覽器上 表單用於顯示 收集資訊,並提交資訊到伺服器 表單二要素 表單元素 表單控制項 input text 文字...

HTML表單元素

表單元素是允許使用者在表單中 比如 文字域,下拉列表,單選框,核取方塊等等 輸入資訊的元素 表單標籤 文字域 text fields 當使用者要在表單中鍵入字母,數字等內容時,就會用到文字域 單選按鈕 radio buttons 當使用者從若干給定的的選擇中選取其一時,就會用到單選框 核取方塊 ch...

html表單元素

自學打卡 2 form 表單元素,讓使用者把資料提交給伺服器 action 指定把請求和資料提交給哪個頁面 伺服器。元素 type text 文字內容 password 密碼 hidden 隱藏框 checkbox 核取方塊 radio 單選框 submit 提交 reset 重置 image 可以...