本文深入探讨了HTML5中的表单相关特性，包括新增的表单属性如form、autofocus、placeholder等，以及增强的textarea、input元素。同时，介绍了HTML5的绘图支持，如canvas元素及其绘图API，包括绘制几何图形、设置阴影和使用路径等功能。
二、表单相关的标签和属性（重点）
HTML使用表单向服务器提交请求，表单、表单控件的主要作用就是收集用户输入、当用户提交表单时，用户输入内容被作为请求参数提交到远程服务器。因此在web编程中，
表单主要用于收集用户输入的数据。在需要与用户交互的web页面中，表单，表单控件都是极为常用的。
HTML5在保留原有HTML表单控件、属性的基础上，大大增强了表单、表单控件的功能。HTML5新增校验API，可以直接在表单控件中通过required,pattern 等属性来指定客户端的校验规则。
1.HTML原有的表单及表单控件
1.1 label定义标签
abel 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<form action="">
<label>用户名:
<input type="text" id="username" >
</label><br/>
<label for="password">密码:</label>
<input type="password" id="password">
</form>
<form>
<label for="male">Male</label>
男: <input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
女: <input type="radio" name="sex" id="female" />
</form>
1.2button按钮
button标签用于定义一个按钮，在button标签的内部可以包含普通文本，文本格式化标签，图像等内容，这正是和input 的按钮不同之处。
控件 与 相比，提供了更为强大的功能和更丰富的内容。 与 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
属性参考 www.w3school.com
1.3增强textarea
参考 www.w3school.com
1.4 fieldset和legend
用来对表单内表单元素进行分组。
<form>
<fieldset>
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>
属性参见www.w3school.com.cn
二、HTML5新增的表单属性
2.1 form 属性
在HTML5之前，所有的表单控件都必须放在元素内部，表明该表单控件属于该表单;但HTML5为表单组件新增了form属性，用于定义该表单控件所属的表单，该属性的值应该是它所属表单的id.
<form action="first.html" id="myform">
<input type="text">
</form>
<button form="myform" type="submit">注册</button>
2.2 formaction 属性
两个以上不同的提交按钮，需要提交到不同的地方
<button type="submit" formaction="form.html">注册</button>
<button type="submit" formaction="table.html">登录</button>
<button type="submit" form="myform" formaction="form.html">注册</button>
<button type="submit" form="myform" formaction="table.html">登录</button>
2.3 formxxx属性
formmethod:可以让按钮动态的设置提交表单以post还是以get方式提交
<form action="first.html" method="get">
用户名:<input type="text" ><br/>
密码:<input type="password">
<input type="submit" formmethod="get" value="get方式提交">
<input type="submit" formmethod="post" value="post方式提交">
</form>
2.4 autofocus 属性
当为某个表单控件增加该属性后，浏览器打开该页面时该组件就会自动获取焦点。由于打开页面时只能有一个控件获的焦点，因此整个页面最多只能有一个表单控件可设置该属性。
2.5 placeholder 属性
在一些用户界面足够人性化的页面里，当用户还未在单行文本框、多行文本域中输入内容时，单行文本框，多行文本域内就显示了对用户的提示信息。一旦用户开始输入、单行文本框、多行文本域内的提示信息就会自动消失。
HTML5之前如果想要实现这个效果必须通过使用javascript来实现。
2.6.list属性
标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。
为了保证List属性具有较好的、一致性的行为，使用datalist定义下拉菜单时，可以让每个option元素的文本与value属性值完全相同。
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
<input list="books" />
<datalist id="books">
<option value="javase">javase疯狂讲义</option>
<option value="javaee"/>javaEE疯狂讲义</option>
<option value="android"/>android疯狂讲义</option>
</datalist>
2.7. autocomplemete 属性
该属性用于设置表单是否支持自动完成功能，如果启用自动完成功能，浏览器会根据用户上次提交的数据生成列表框供用户选择，或提示自动完成。
autocomplemete = on 开启
off关闭。效果不明显
<form action="first.html" method="post" autocomplete="on">
用户名:
<input type="text" >
<br/> 密码:
<input type="password" placeholder="请输入密码" autofocus="autofocus" >
<input type="submit" value="get方式提交">
</form>
三、HTML5新增的表单元素
3.1 功能丰富的input元素（详细介绍参考 www.w3school.com.cn）
E-mail: <input type="email" name="user_email" /><br/>
Homepage: <input type="url" name="user_url" /><br/>
Points: <input type="number" name="points" min="1" max="10" /><br/>
<input type="range" name="points" min="1" max="10" /><br/>
Date: <input type="date" name="user_date" /><br/>
month:<input type="month" name="user_month"><br/>
week:<input type="week" name="user_week"><br/>
time:<input type="time" name="user_time"><br/>
datetime:<input type="datetime" name="date_time"><br/>
datetime-local:<input type="datetime-local" name="date_time"><br/>
color:<input type="color" name="mycolor"/>
search:<input type="search" name="mysearch"/>//search对于手机等手持设备有特殊作用。
3.2 output元素
该元素用于显示输出。比如计算结果或脚本的输出。
<input type="color" id="mycolor" onchange="myout.value=this.value" />
<output name="myout" for="mycolor"></output>
<input type="range" id="points" min="1" max="100" onchange="myrange.value=this.value" />
<output name="myrange" for="points"></output>
3.3 meter元素
该标签用来表示一个已知最大值和最小值的计数仪表，比如电池的剩余电量、速度表等。
行车速度千米/小时
high number 定义度量的值位于哪个点，被界定为高的值。
low number 定义度量的值位于哪个点，被界定为低的值。
max number 定义最大值。默认值是 1。
min number 定义最小值。默认值是 0。
optimum number
定义什么样的度量值是最佳的值。
如果该值高于 “high” 属性，则意味着值越高越好。
如果该值低于 “low” 属性的值，则意味着值越低越好。
value number 定义度量的值。
3.4 progress元素
用于表示一个进度条
max：指定进度条完成时的值
value:指定进度条当前完成的进度值
<progress value="30" max="100"></progress>
3.5 标签
见 www.w3school.com.cn
3.7HTML5新增客户端校验
在HTML5之前,客户端校验只能通过javascript来完成，HTML5新增了一些输入校验特性
required:该属性指定该表单控件必须填写。该属性值是required 或完全省略
pattern: 该属性指定该表单控件的值必须符合指定的正则表达式。该属性的值必须是一个合法的正则表达式。
min、max、step,这三个属性只对数值类型、日期类型的元素有效，这个属性控制该表单控件的值必须在min~max之间，并且符合步长。
图书ISBN:<input type="text" name="phone" id="phone" required pattern="\d{3}-\d-\d{3}-\d{5}"/>
图书价格:<input type="number" min="20" max="150" step="5">
function validate(){
var pattern = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
var regExp = new RegExp(pattern);
var phone = document.getElementById("phone")
var result = regExp.test(phone.value);
if(result){
document.getElementById("myForm").submit();//提交表单
}
}
四、HTML5 的绘图支持
html5以前的时代，前端开发者无法在HTML页面上动态的绘制图片。如果实在需要在HTML页面上动态生成图片，要么在服务器端生成后输出到HTML页面上，要么使用flash等第三方工具，HTML5新增了一个canvas元素，这个元素本身功能比较有限
但通过该元素可以获得一个CanvasRenderingContext2D对象，该对象是一个功能强大的绘图API。
canvas元素上绘图是通过CanvasRenderingContext2D对象来完成的，需要使用javascript脚本来控制该对象绘图
canvas可以绘制几何图形、绘制字符串、利用路径来绘制复杂的集合图形等。
4.1 使用canvas元素
html5新增了一个canvas元素，该元素专门用于绘制图形，但实际上，canvas本身并不绘制图形，它只是相当于一张空白画布。如果想绘制图形必须使用javascript脚本进行绘制。
属性：
width:画布的宽度
height:画布的高度
4.2绘制几何图形
<canvas id="mycnavas" style="border:1px solid black;"></canvas>
<script type="text/javascript">
var mycnavas = document.getElementById("mycnavas");
var context = mycnavas.getContext('2d');
context.fillStyle="#FF0000";
context.fillRect(30,40,80,100);
</script>
重点是要学习CanvasRenderingContext2D对象上的方法。
var mycnavas = document.getElementById("mycnavas");
var context = mycnavas.getContext('2d');
context.fillStyle = "#ff0";
//填充一个矩形
context.fillRect(30, 40, 80, 100);
context.fillStyle="#ff0";
context.fillRect(150,100,120,60);
//设置线条的颜色
context.strokeStyle="#00f";
//设置线的宽度
context.lineWidth=10;
//绘制一个矩形边框
context.strokeRect(100,150,120,60);
context.strokeStyle="#0ff";
context.lineJoin="round"//设置线条连接风格
context.strokeRect(120,160,120,60);
context.strokeStyle="#f0f";
context.lineJoin="bevel";
context.strokeRect(130,190,120,60);
4.3.点线模式
绘制线段或边框默认总是使用实线，如果想使用点线控制，则可通过设置CanvasRenderingContext2D的setLineDash方法和lineDashOffset属性来实现
setLineDash方法需要一个类型为 sequence的值，每个double值依次控制电线的实线长度、间距.
[2,3] ：代表长为 2的实线，间距为3的间距 这种电线模式
[2,3,1]:代表长为2的实线，距离为3的间距，长为1的实线，距离为2的间距。长为3的实战，距离为1的间距
[5,3,1,2]代表长为5的实线，距离为3的间距、长为1的实线、距离为2的间距
lineDashOffset属性用于指定点线的相位，该属性将会与lineDash属性协同起作用
lineDashOffset=1,lineDash=[2,3]:代表长为2的实线、距离为3的间距 但刚开始绘制起点时只绘制长度为1的实线，因为lineDashOffset为1就是控制该点线”移过“1个点。
lineDashOffset=3,lineDash=[5,3,1,2] 代表长为5的实线，距离为3的间距，长为1的实线、距离为2的间距。但刚开始绘制时只绘制长度为2的实线，因为lineDashOffset为3就是控制该点线“移过”3个点
<canvas id="canvas"></canvas>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.setLineDash([4,16]);
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400,100);
ctx.stroke();
4.4 绘制字符串
CanvasRenderingContext2D为绘制文字提供了如下两个方法：
fillText() :填充字符串
strokeText() 绘制字符串边框
<canvas id="canvas" width="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "48px serif";
ctx.font = "italic 50px 隶书";
ctx.fillText("Hello World", 50, 100);
ctx.strokeStyle="#f0f";
ctx.font = "bold 45px 宋体";
ctx.strokeText('Hello world',0,50);
</script>
4.5 设置阴影
shadowBlur:设置阴影模糊度。该属性值是一个浮点数，该数值越大，阴影的模糊程度越大
shadowColor:设置阴影颜色
shadowOffsetX:设置阴影在X方向的偏移
shadowOffsetY:设置阴影在y方向的偏移
var canvas = document.getElementById(“canvas”);
var ctx = canvas.getContext(“2d”);
ctx.shadowColor = “black”;
ctx.shadowBlur = 20;
ctx.fillStyle = “white”;
ctx.fillRect(10, 10, 100, 100);
var canvas = document.getElementById(“canvas”);
var ctx = canvas.getContext(“2d”);
ctx.shadowBlur=5.6;
ctx.shadowColor="#222";
ctx.shadowOffsetX=10;
ctx.shadowOffsetY=-6;
ctx.strokeStyle=’#f0f’;
ctx.font=“bold 45px 宋体”;
ctx.strokeText(‘轻量级JAVAEE企业实战’,0,50);
4.6 使用路径
beginPath()开始路径
closePath()关闭路径
fill()或stroke()来填充路径或绘制路径边框
arc 向 Canvas的当前路径上添加一段弧
arcTo 向Canvas的当前路径上添加一段弧，定义的方式不同
bezierCurveTo()添加一段曲线
lineTo()把canvas的当前路径从当前结束点连接到x,y对应的点
moveTo()把canvas的当前路径的结束点移动到x,y对应的点
quadraticCurveTo()向canvas的当前路径上添加一段二次曲线
rect向canvas 的当前路径上添加一个矩形。
var canvas = document.getElementById(“canvas”);
var ctx = canvas.getContext(“2d”);
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2);
ctx.stroke();
<canvas id="canvas" width="400" height="350" style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
for ( i = 0; i < 10; i++) {
ctx.beginPath();
ctx.arc(i*25, i*25, (i+1)*8, 0, Math.PI * 2,true);
ctx.closePath();
ctx.fillStyle="red";
ctx.fill();
}
</script>
绘制渐变：
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
// 创建渐变
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// 填充渐变
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, “red”);
grd.addColorStop(1, “white”);
// 填充渐变
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
canvas图像 将一张图片放在画布上
<canvas id="canvas" width="200" height="200"></canvas>
<img id="source" src="1.jpg" width="200" height="200">
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("source");
ctx.drawImage(img,10,10);
</script>
扫一扫
541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
