一、表單
功能:表單用于向伺服器傳輸資料,進而實作使用者與Web伺服器的互動
表單能夠包含input系列标簽,比如文本字段、複選框、單選框、送出按鈕等等。
表單還可以包含textarea、select、fieldset和 label标簽。
表單屬性
action: 表單送出到哪.一般指向伺服器端一個程式,程式接收到表單送出過來的資料(即表單元素值)作相應處理,比如https://www.sogou.com/web
method: 表單的送出方式 post/get預設取值就是get
注意啦!!!!
from表單:實作使用者與web伺服器的互動
以鍵值對的形式發過去{"":"haiyan","":"123"}
如果沒有name屬性,你的資料是不過去的
name:鍵名
請求server端的方式:
get:請求會放在url後面 username=yaun&password =123
post:請求會放在請求體裡
關于 url的内容
url: https://www.baidu.com(協定:域名(也是ip+端口))
url: http:127.0.0.1:8800/blog/addBlog(協定:ip:端口/)
url: http:127.0.0.1:8800/blog/addBlog?username = yuan
http:協定
127.0.0.1:8800:ip位址與端口
blog/addBlog:url的路徑(path)
username = yuan:get請求資料
請求協定:
浏覽器發給伺服器(get請求,post請求)
格式:
請求首行
請求頭:就是一組組鍵值對
換行 \n,\n\r
請求資料:有兩種方式
if get :
url?data
if post :
請求資料
get請求:安全性差,資料量有限(當設計到查詢的時候會用到get請求)
那些是get請求(一般都是查詢資料庫操作):
1.url通路server端
2.超連結通路,即a标簽
post請求:相對于get安全點,,但是沒有絕對的安全(修删改可以用post)
相應協定:
表單元素
基本概念:
HTML表單是HTML元素中較為複雜的部分,表單往往和腳本、動态頁面、資料處理等功能相結合,是以它是制作動态網站很重要的内容。
表單一般用來收集使用者的輸入資訊
表單工作原理:
通路者在浏覽有表單的網頁時,可填寫必需的資訊,然後按某個按鈕送出。這些資訊通過Internet傳送到伺服器上。
伺服器上專門的程式對這些資料進行處理,如果有錯誤會傳回錯誤資訊,并要求糾正錯誤。當資料完整無誤後,伺服器回報一個輸入完成的資訊
<input>系列标簽
\'\'\'
<1> 表單類型
type: text 文本輸入框
password 密碼輸入框
radio 單選框
checkbox 多選框
submit 送出按鈕
button 按鈕(需要配合js使用.) button和submit的差別?
file 送出檔案:form表單需要加上屬性enctype="multipart/form-data"
上傳檔案注意兩點:
請求方式必須是post
enctype="multipart/form-data"
<2> 表單屬性
name: 表單送出項的鍵.
注意和id屬性的差別:name屬性是和伺服器通信時使用的名稱;
而id屬性是浏覽器端使用的名稱,該屬性主要是為了友善用戶端程式設計,而在css和javascript中使用的
value: 表單送出項的值.對于不同的輸入類型,value 屬性的用法也不同:
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關聯的值
checked: radio 和 checkbox 預設被選中
readonly: 隻讀. text 和 password
disabled: 對所用input都好使.
\'\'\'
select标簽
\'\'\'
<select> 下拉選标簽屬性
name:表單送出項的鍵.
size:選項個數
multiple:multiple
<optgroup>為每一項加上分組
<option> 下拉選中的每一項 屬性:
value:表單送出項的值.
selected: selected下拉選預設被選中
\'\'\'
<textarea> 多行文本框
‘’\'\'
<form id="form1" name="form1" method="post" action="">
<textarea cols=“寬度” rows=“高度” name=“名稱”>
預設内容
</textarea>
</form>
\'\'\'
<label>标簽
定義:<label> 标簽為 input 元素定義标注(标記)。
說明:
1 label 元素不會向使用者呈現任何特殊效果。
2 <label> 标簽的 for 屬性值應當與相關元素的 id 屬性值相同。
\'\'\'
<form method="post" action="">
<label for=“username”>使用者名</label>
<input type=“text” name=“username” id=“username” size=“20” />
</form>
\'\'\'
<fieldset>标簽
\'\'\'
<fieldset>
<legend>登入吧</legend>
<input type="text">
</fieldset>
\'\'\'
執行個體
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注冊頁面</title>
</head>
<body>
<h3>注冊頁面</h3>
<!--action放的是ip位址和端口-->
<!--method放的是請求方式-->
<form action="" method="post">
<hr size="5" color="red">表單中input系列
<label for="c1"> <!--label标簽就是把下面的姓名關聯起來-->
<p>姓名:<input type="text" name="username" id="c1"></p>
</label>
<!--#當你不輸入的時候有個預設的value值-->
<p>密碼:<input type="password" name="password" value="123"></p>
<!--單選框ridio-->
<p>性别:<input type="radio" name = gender value="male">男:<input type="radio" name="gender" value="female">女</p>
<!--複選框checkbox-->
<p>愛好:<input type="checkbox" name="hobby" value="basketball">籃球<input type="checkbox" name="hobby" value="football">足球<input type="checkbox" name="hobby" value="sport">運動</p>
<!--檔案-->
<p>頭像:<input type="file" name="fileobj"></p>
<hr size="5" color="red">上面的value和下面的value是不一樣的,上面的是發送請求的,下面的是修改值的
<!--重置-->
<p><input type="reset" value="reset"></p>
<!--其實是submit按鈕把資料送出到action指定的位址了-->
<p><input type="submit"></p>
<!--空按鈕 當你輸入值才有内容-->
<!--onclick:滑鼠點選事件-->
<p><input type="button" value="按鈕" onclick="alert(\'确定\')"></p>
<!--onmouseover:滑鼠指到上面就觸發-->
<p><input type="button" value="按鈕" onmouseover="alert(\'确定\')"></p>
<!--隐藏:不想讓使用者看見-->
<p><input type="hidden" name="sss" value="sds"></p>
<!--文本域-->
<p>個人履歷<br>
<textarea name="selfinfo" cols="30" rows="10"></textarea>
</p>
<fieldset>海燕啊啊啊啊啊啊啊</fieldset>
<!--下拉框-->
<hr size="5" color="red">表單中select系列
<select name="provice" size="5" multiple="multiple" >
selected設定預設選擇。如果select裡有multiple屬性,那麼可以在option裡面設定多個selected
<option value="hebei" selected="selected">甘肅省</option>
<option value="henan" selected="selected">河南省</option>
<option value="hebei">湖北省</option>
<option value="shanxi">陝西省</option>
</select>
<fieldset>
<legend>登入吧</legend>
<input type="text">
</fieldset>
</form>
<!--以鍵值對的形式發過去{"":"haiyan","":"123","gender":"male","hobby":["basketball","football"],"fileobj":"fileobj"}-->
<!--如果沒有name屬性,你的資料是發不過去的-->
<!--name:鍵名-->
</body>
</html>
2.div和span标簽
<div></div> : <div>隻是一個塊級元素,并無實際的意義。主要通過CSS樣式為其賦予不同的表現.
<span></span>: <span>表示了内聯行(行内元素),并無實際的意義,主要通過CSS樣式為其賦予不同的表現.
塊級元素與行内元素的差別
所謂塊元素,是以另起一行開始渲染的元素,行内元素則不需另起一行。如果單獨在網頁中插入這兩個元素,不會對頁面産生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。
3.圖檔标簽img
src: 要顯示圖檔的路徑.
alt: 圖檔沒有加載成功時的提示.
title: 滑鼠懸浮時的提示資訊.
width: 圖檔的寬
height:圖檔的高 (寬高兩個屬性隻用一個會自動等比縮放.)
\'\'\'
4.清單标簽
<ul>: 無序清單 [type屬性:disc(實心圓點)(預設)、circle(空心圓圈)、square(實心方塊)]
<ol>: 有序清單
<li>:清單中的每一項.
<dl> 定義清單
<dt> 清單标題
<dd> 清單項
\'\'\'
執行個體:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--有序清單-- order list-->
<!--預設是1,2,3,4有序,如果加type就會以你指定的有序-->
<ol type="a">
<li>haha</li>
<li>haha</li>
<li>haha</li>
<li>haha</li>
<li>haha</li>
</ol>
<!--無序清單-->
<ul>
<li>鳥</li>
<li>鳥</li>
<li>鳥</li>
<!--實心圓(預設是實心圓)-->
<li type="disc">鳥</li>
<!--空心圓-->
<li type="circle">鳥</li>
<!--方形-->
<li type="square">鳥</li>
</ul>
<!--定義清單-->
<!--define liset-->
<dl>
<!--定義的标題内容 define title-->
<dt>河北省</dt>
<!--内容-->
<dd>石家莊</dd>
<dd>天津</dd>
<dd>雄安</dd>
</dl>
</body>
</html>
運作截圖