技術標籤：html

表單

• 一.表單語法
• 二.表單元素格式
• 三.表單元素
• • 1.文字框(text)
  • 2.密碼框(password)
  • 3.單選按鈕(radio)
  • 4.複選框(checkbox)
  • 5.列表框(select)
  • 6.按鈕(reset,submit,button,image)
  • • 重置按鈕(reset)
    • 提交按鈕(submit)
    • 普通按鈕(button)
    • 圖片按鈕(image)
  • 7.多行文字域(textarea)
  • 8.檔案域(file)
  • 9.郵箱(email)
  • 10.網址(url)
  • 11.數字(number)
  • 12.滑塊(range)
  • 13.搜尋框(search)

一.表單語法

<form action="result.html"
 
 method="post">
<input type="..." name="..." value="...">
</form>

action表示向何處傳送表單資料
method規定如何傳送表單資料，常用值：get/post
(實際網頁開發中通常採用post方式)

二.表單元素格式

<input type="..." name="..." value="..."/>

三.表單元素

1.文字框(text)

<input type="text" name="userName" value="使用者名稱" size="20" maxlength="5"/>

2.密碼框(password)

<input type="password" name="pass" maxlength="5"/>
效果圖

3.單選按鈕(radio)

<input type="radio" name="gender" value="男" checked>男
<input type="radio" name="gender" value="女">女
效果圖

4.複選框(checkbox)

<input type="checkbox" name="interest" value="sports" checked>體育
<input type="checkbox" name="interest" value="draw">繪畫
<input type="checkbox" name="interest" value="sing">唱歌

效果圖

5.列表框(select)

<select name="singer" size="4">
<option value="liyifeng" selected="selected">李易峰</option>
<option value="chenyixun">陳奕迅</option>
<option value="wuyuetian">五月天</option>
<option value="zhoujielun">周杰倫</option>
</select>

name：列表名稱
size：行數
value：選項的值

效果圖

6.按鈕(reset,submit,button,image)

重置按鈕(reset)

<input type="reset" name="butresert" value="重置">
效果圖

提交按鈕(submit)

<input type="submit" name="butsubmit" value="提交">
效果圖

普通按鈕(button)

<input type="button" name="butbutton" value="點我登陸">
效果圖

圖片按鈕(image)

<input type="image"src="1.jpg">
src:圖片的路徑

效果圖

7.多行文字域(textarea)

<textarea name="showtext" cols="3" rows="5">文字內容</textarea>
cols:顯示的列數
rows:顯示的行數
效果圖

8.檔案域(file)

<form action="#" method="post" enctype="multipart/form-data">
  <p><input type="file" name="files" />
  <input type="submit" name="upload" value="上傳" /></p>
</form>

enctype="multipart/form-data"表單編碼屬性
效果圖

9.郵箱(email)

<input type="email" name="email" >
效果圖

10.網址(url)

<input type="url" name="userurl" >
(會自動驗證url地址格式是否正確)

效果圖

11.數字(number)

<input type="number" name="num" min="0" max="10" step="1">
min:允許的最小值
max:允許的最大值
step:數字間隔
效果圖

12.滑塊(range)

<input type="range" name="range1" min="0" max="10" step="2">
效果圖

13.搜尋框(search)

<input type="search" name="sousuo">
效果圖