HTML5的表單設計

用過Delphi的程序員，對Form這個詞應該比較熟悉。在Delphi中，Form被翻譯為“窗體、窗口”，作用是：為用戶提供界面，供用戶輸入信息，向用戶展示處理結果。

HTML5中也有Form，功能與Delphi中的Form差不多，用于接收用戶輸入，和服務器進行交互。不過HTML5中的Form，中文一般譯為“表單”。

1、Web前端與Web后端的交互

Web前端，指瀏覽器上展示的HTML文件，以及HTML文件使用的CSS文件及JavaScript腳本。

Web后端，指運行在服務器上的，為Web前端提供服務的軟件，Web后端也常常被稱為Web服務器。

在HTML5中，Web前端與Web后端交互的流程一般如下：

（1）Web前端向Web后端發起HTTP請求；

（2）Web后端收到HTTP請求后，進行業務處理；

（3）Web后端向Web前端返回HTTP響應。

到目前為止，我們在HTML5中碰到的Web前端發起HTTP請求的方式有兩種：

第1種：HTML頁面通過<a>元素向用戶提供超級鏈接，用戶點擊該鏈接時，會向服務器發起請求；

第2種：HTML頁面通過表單為用戶提供輸入界面，用戶提交表單時，會向服務器發起請求。

2、GET請求和POST請求

HTTP請求有八種，對Web前端開發者來說，最常用的是GET請求和POST請求。

GET請求：向Web后端請求指定的頁面；GET請求攜帶的數據，以URL參數的形式提供；

POST請求：向Web后端提交數據，請求Web后端對數據進行處理；POST請求攜帶的數據，在請求消息體中提供。

在HTML5中，用戶點擊鏈接地址，Web前端向后端發起GET請求；

在HTML5中，用戶提交表單，Web前端可以向后端發起GET請求，也可以發起POST請求。

說明：由于目前沒有和后端服務器對接，為了便于對表單設計進行展示，下面的例子HTML文檔，都是用GET請求來提交數據。

3、表單的主要元素

<form>元素：表示表單；

<input>元素：表單中的輸入控件，輸入控件可以是文本框、單選框、復選框、按鈕等等；

<label>元素：表單中的標簽控件；

<button>元素：表單中的按鈕控件；

<select>與<option>元素：用于實現列表框和下拉菜單；

<textarea>元素：多行文本控件。

4、表單提交文本框的輸入

下面是一個可以提交文本框輸入的HTML文檔：

<!DOCTYPE html>
<html>
<head>
<title>form001</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>請輸入您的姓名：</label>
<input type="text" name="name" />
<br/>
<input type="submit"/>
</form>
</body>
</html>

在瀏覽器中打開該HTML文檔時，展示效果如下：

我們可以在文本框中輸入信息，例如輸入tom：

當我們點擊“提交”按鈕后，瀏覽器顯示信息如下；

可以看到，數據被提交給process.html頁面，并且附帶了一個參數name，且值為我們輸入的tom。

5、表單提交用戶對單選框的選擇

下面是一個可以提交單選框被選信息的HTML文檔：

<!DOCTYPE html>
<html>
<head>
<title>form002</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>性別：</label>
<br/>
男：<input type="radio" name="gender" value="male" />
女：<input type="radio" name="gender" value="female" />
<br/><br/>
<label>國籍：</label>
<br/>
中國：<input type="radio" name="nationality" value="Chinese" /> <br/>
美國：<input type="radio" name="nationality" value="American" /> <br/>
日本：<input type="radio" name="nationality" value="Japanese" /> <br/>
英國：<input type="radio" name="nationality" value="English" /> <br/>
其它：<input type="radio" name="nationality" value="Other" /> <br/>
<br/>
<input type="submit"/>
</form>
</body>
</html>

在瀏覽器中打開該HTML文檔時，顯示效果如下：

我們可以選擇性別和國籍，例如我們選擇“男”和“中國”：

當我們點擊“提交”按鈕后，瀏覽器顯示信息如下：

可以看到，我們選擇的信息被提交給process.html文件，并且附帶了gender參數的值為male，nationality參數的值為Chinese。

6、表單提交用戶對復選框的選擇

下面是一個可以提交復選框被選信息的HTML文檔；

<!DOCTYPE html>
<html>
<head>
<title>form003</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>請選擇您的業余愛好：</label>
<br/>
美術：<input type="checkbox" name="hobby" value="Art" /> <br/>
足球：<input type="checkbox" name="hobby" value="Football" /> <br/>
唱歌：<input type="checkbox" name="hobby" value="Singing" /> <br/>
廚藝：<input type="checkbox" name="hobby" value="Cook" /> <br/>
其它：<input type="checkbox" name="hobby" value="Other" /> <br/>
<br/>
<input type="submit"/>
</form>
</body>
</html>

在瀏覽器中打開該HTML文檔時，顯示效果如下：

我們可以選擇自己的業余愛好，例如我們選擇足球、唱歌、廚藝：

當我們點擊“提交”按鈕后，瀏覽器顯示信息如下：

可以看到，我們選擇的信息被提交給process.html文件，并且附帶了三個hobby參數，其值分別為Football，Singing和Cook。

7、表單提交用戶對下拉菜單的選擇

下面是一個可以提交下拉菜單被選信息的HTML文檔；

<!DOCTYPE html>
<html>
<head>
<title>form004</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>請選擇您的學歷：</label>
<br/>
<select name="education">
<option value="primary_school">小學</option>
<option value="junior_high_school">初中</option>
<option value="senior_high_school">高中</option>
<option value="college">大學</option>
</select>
<br/><br/>
<label>請選擇您的興趣愛好：</label>
<br/>
<select name="hobby" multiple="true">
<option value="Art">美術</option>
<option value="Football">足球</option>
<option value="Singing">唱歌</option>
<option value="Cook">廚藝</option>
<option value="Other">其它</option>
</select>
<br/><br/>
<input type="submit"/>
</form>
</body>
</html>

在瀏覽器中打開該HTML文檔時，顯示效果如下：

我們可以單選我們的學歷，也可以通過按下Shift+鼠標鍵多選我們的興趣。例如我們選擇“初中”學歷，選擇“美術”和“廚藝”兩項愛好：

當我們點擊“提交”按鈕后，瀏覽器顯示信息如下：

可以看到，我們選擇的信息被提交給process.html文件，并且附帶了education參數和兩個hobby參數，education的值為junior_high_school，hobby的值為Art和Cook。

上面列舉了幾種控件的HTML5表單設計方法，其它的控件也大概差不多，把多個控件組合在同一個<form>元素中的方法也是相同的，這里就不再贅述了。

TML5新特性

(1)新的語義標簽 header;footer

(2)增強型表單

新 input type

number;email;url;date;color

新 element

datalist

建議列表

progress

進度條

meter

刻度尺

output

新 attr

placehodler;autofocus;minlength;maxlength;min;max;

(3)視頻和音頻

視頻

? mp4 安裝mp4解碼器

? avi 安裝avi解碼器

autoplay;controls;muted;poster;preload

js volume;playbackRate;paused;

play() pause() onplay onpause()

音頻

(4)繪圖 Canvas

網頁中繪圖三種技術

svg

2d矢量圖

矢量圖由一個一個線條組件

無限放大縮小不會失真

百度地圖

flash動畫效果

canvas

2d位圖

webgl

3d位圖

three.js

canvas

開發流程

創建畫布 <canvas width="" height=""></canvas>

獲取畫布

var c3 = document.getElementById("c3");

創建畫筆

var ctx = c3.getContext("2d");

矩形

ctx.lineWidth = 1;

ctx.strokeStyle = "#fff"

ctx.strokeRect(x,y,w,h);

ctx.fillStyle= "#fff"

ctx.fillRect(x,y,w,h);

ctx.clearRect(x,y,w,h);

文本

ctx.font=""

ctx.textBaseline = "";

ctx.fillText(str,x,y);

ctx.strokeText(str,x,y)

ctx.measureText(str).width

路徑

路徑由多個坐標點組件本身不可見但可以用描邊填充

ctx.beginPath() 開始一條新路徑

ctx.closePath() 閉合一條路徑

ctx.moveTo(x,y) 移動到指定點

ctx.lineTo(x,y) 從當前點到指定點畫一條直線

ctx.arc(cx,cy,r,start,end)

cx/cy 圓心

r 半徑

start 起始角度

end 終止角度

ctx.stroke()

ctx.fill()

畫像

圖像保存服務器中,canvas客戶端技術下載

var p3 = new Image()

p3.src = "img/p3.png"

p3.onload = function(){}

ctx.drawImage(p3,x,y,w,h)

變形

ctx.rotate(弧度)

旋轉角度，旋轉畫筆

ctx.translate(x,y)

平移原點[軸點]

ctx.translate(250,200)

0,0 原先左上角->0,0 畫布中心

ctx.save(); 保存畫筆狀態 {原點,角度;顏色...}

ctx.restore(); 恢復畫筆狀態

漸變對象

var g = ctx.createLinearGradient(0,0,500,0)

g.addColorStop(offset,color)

ctx.fillStyle = g;

ctx.fillRect(0,0,100,30)

(5) SVG

區別

矢量圖

標簽

每個元素都可以綁定事件

統計圖

創建元素

字符串拼接

var html = "<rect></rect>"

svg.innerHTML = html

創建元素

var r = document.createElementNS("http://www.w3.org/2000/svg","rect")

r.setAttribute("fill","")

svg.appendChlid(r)

刪除

svg.removeChlid(c)

svg.innerHTML = ""; 所有元素清除

圖形

橢圓

直線

折線

<polyline points="x,y x,y.."

文本

圖形

<image xlink:href="x.mpr"></image

特效對象

漸變對象

濾鏡

第三方繪圖庫

d3/echarts

加載 echarts.min.js

var mychart -= echarts.init(...main)

var option = {} 配置項

mychart.setOption(option)

(6)拖放API

操作:拖動和釋放

源對象(動)

ondragstart

ondrag

ondragend

目標對象

ondragenter

ondragover

ondragleave

ondrop

(7)地理定位

geolocation

百度地圖

(8)WebWorker

創建新線程執行耗時JS任務

var w = new Worker("x.js")

w.postMessage(str)

x.onmessage = function(e){e.data}

(9)Web Storage

客戶端存儲數據

sessionStorage

當前會話中生效

會話:

獲取數據

var value = sessionStoage.getItem(key)

獲取數據

var value = sessionStoage[key]

保存數據

sessionStoage.setItem(key,value)

保存數據

sessionStorage[key] = value

清除數據

sessionStorage.clear()

數除數據

sessionStorage.removItem(key)

數據個數

sessionStorage.length

獲取key

var key = sessionStorage.key(i)

localStorage

(10)Web Socket

天是2021.7.14,是個好日子.好久沒發布文章了.今天發布下如何在在html頁面中使用vue3.義縣游學電子科技一直以技術文章為主.以下是h5的頁面源碼:

<html>
<script src="https://unpkg.com/vue@next"></script>

<body>
<div id="vue">
<div v-html="rhtml"></div>
<props-demo-simple></props-demo-simple>

</div>

</body>
<script>
const htmls={
data(){
return{
rhtml:"<h1>html頁面中引用VUE3的演示頁面</h1>",
}
}
}

const app=Vue.createApp(htmls)

// 簡單語法注冊或獲取全局組件.注冊還會自動使用給定的 id 設置組件的名稱
app.component('props-demo-simple', { data() {
return {
count: 0
}
},
props: ['size', 'myMessage'],template: `
<button v-on:click="count++">
You clicked me {{ count }} times.
</button>`
}

)
app.mount("#vue")
</script>
</html>

分析下:首先<script src="https://unpkg.com/vue@next"></script>,引入vue3的腳本地址. 然后在body下的<script>中書寫vue3的代碼即可. 下圖是運行的結果效果

在線咨詢

上一篇：HTML大整合（上）
下一篇：html基礎必備，前端小白一看就會

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5的表單設計

1、Web前端與Web后端的交互

2、GET請求和POST請求

3、表單的主要元素

4、表單提交文本框的輸入

5、表單提交用戶對單選框的選擇

6、表單提交用戶對復選框的選擇

7、表單提交用戶對下拉菜單的選擇

您的項目需求

1、Web前端與Web后端的交互

2、GET請求和POST請求

3、表單的主要元素

4、表單提交文本框的輸入

5、表單提交用戶對單選框的選擇

6、表單提交用戶對復選框的選擇