整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html5+canvas按钮特效

注本头条号,专注做前端

它就是一个普通的按钮,但是它通过html5+canvas做了点击特效 ——点击的时候会有彩色的粒子飞散开来,效果非炫酷。

//

lt;select>下拉框

<option>是下拉框的选项

<submit>提交按钮

<value>名称提交方式

<checked>单选按钮进入页面必选这个

<checkbox>多选按钮



<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

请选择你喜欢的水果<br />

<form>

<input type="radio" value="apple" name="fruit" checked="checked"/>苹果<br />

<input type="radio" value="orange" name="fruit"/>橘子<br />

<input type="radio" value="mango" name="fruit"/>芒果<br />

<input type="submit" value="提交"/>

</form>

请选择你喜欢的水果<br />

<form>

<input type="checkbox" value="apple" name="fruit"/>苹果<br />

<input type="checkbox" value="orange" name="fruit"/>橘子<br />

<input type="checkbox" value="banana" name="fruit"/>香蕉<br />

<input type="submit" value="提交"/>

</form>

请选择你喜欢的水果<br />

<form>

<select name="fruit" size="2">

<option value="apple">苹果</option>

<option value="orange">橘子</option>

<option value="mango" selected="selected">芒果</option>

</select><br />

<input type="submit" value="提交"/>

</form>

</body>

</html>

lt;input>比较重要

<type>属性:<text>文本框 <password>密码框 <checkbox>复选框 <radio>单选按钮 <submit> <reset> <file> <hidden> <image> <button>

默认属性为<text>

<name>属性指定表单元素的名称

<value>属性指定表单元素的初始值

<size>属性指表单元素的初始宽度 一般用于文本框和密码框

<maxlength>属性指可在<text>或<password>元素中输入最大的字符串 一般用于文本框和密码框

<checked>属性指此属性只有一个值,如果不选中就不用添加此属性 一般用于单选按钮和复选框

<readonly>文本标签指定为readonly文本不允许更改 一般用于文本框和密码框

多行文本域<textarea > <cols>宽度 <rows>高度

<submit>提交按钮

<reset>重置按钮

<button>普通按钮



!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<form name="myfoem" action="" meathod="post">

用户id<input type="text" name="userid" size="25" value="用户id自动生成" readonly="readonly"/><br />

密码<input type="password" name="realname"/><br />

自我评价:<textarea name="msg" cols="40" rows="5">请输入自我评价的内容···</textarea><br />

<input type="submit" value="提交"/><br />

<input type="reset" value="重置"/><br />

<input type="button" value="普通按钮" onclick="window.alert('你好’)"/><br />

</form>

</body>

</html>