html5+css3 |表单的应用

百变鹏仔 2个月前 (10-19) #H5教程

文章标签表单

1.创建表单的基本语法格式如下：

<from action=”url 地址”method=”提交方式”name=”表单名称”>     各种表单控件</form>

如下例子：

P212-213<!doctype html><html><head><meta charset=”utf-8”><title>创建表单</title></head><body><from action=”http://www.mysite.cn/index.asp”method=”post” id=”formBox”autocomplete=”on”>  用户名：  <input type=”text”id=”autofirst”name=”autofirst”/><br/><br/>  账号：  <input type=”text”name=”zhanghao”/>  密码：  <input type=”password”name=”mima”/>  <input type=”submit”value=”提交”/></form></body></html>

2.input元素的type属性

（1）单行文本输入框

用户名：name;账号：value;证件号:maxlength

立即学习“前端免费学习笔记（深入）”；

(2)密码输入框

(3)单选按钮

(4)复选框

(5)普通按钮

(6)提交按钮

(7)重置按钮

(8)图像形式的提交按钮

(9)隐藏域

(10)文件域

(11)email类型

(12)url类型

(13)tel类型

(14)search类型

(15)color类型

(16)number类型

<input type=”number”name=”number1”value=”1”min=”1”max=”20”step=”4”/><br/>

(17)range类型

(18)Date pickers类型

<form action=”#”method=”get”>  <input type=”date”/>;  <input type=”month”/>;  <input type=”week”/>;  <input type=”time”/>;  <input type=”datetime”>  <input type=”datetime-local”/>  <input type=”submit”value=”提交”/></form>

3.其它元素

(1)list属性

<form action=”#”method=”get”>请输入网址：<input type=”url”list=”url_list”name=”weburl”/><datalist id=”url_list”>  <option label=”新浪”value=”http://www.sina.com.cn”></option>  <option label=”搜狐”value=”http://www.sohu.com.cn”></option>  <option label=”传智”value=”http://www.itcast.cn/”></option></datalist>

(2)multiple属性

<form action=”#”method=”get”>电子邮箱：<input type=”email”name=”myemail”multiple=”true”/>上传照片：<input type=”file”name=”selfile”multiple=”true”/><br/><br/><input type=”submit”value=”提交“/></form>

（3）placeholder属性

<form actiom=”#”method=”get”>请输入邮政编码：<input type=”text”name=”code”pattern=”[0-9]{6}”placeholder=”请输入6位数的邮政编码”/><input type=”submit”value=”提交”/></form>

(4)textarea元素

<textarea cols=”每行中的字符数”rows=”显示的行数“> 文本内容</textarea>

例子：

<form action=”#”method=”post”>评论：<br/>     <textarea cols=”60”rows=”8”>评论的时候，请遵纪守法并注意语言文明。     </textarea><br/>     <input type=”submit”value=”提交”/></form>

(5)select元素

<select>  //<optgroup>  <option>1</option>  <option>2</option>  <option>3</option></select>

(6)datalist元素

<form action=”#”method=”post”>请输入用户名：<input type=”text”list=”namelist”/><datalist id=”namelist”>  <option>admin</option>  <option>lucy</option></datalist><input type=”submit”value=”提交”/></form>

(7)keygen元素

<form action=”#”method=”get”>请输入用户名：<input type=”text”name=”user_name”/><br/>请选择加密强度：<keygen name=”security”/><br/><input type=”submit”value=”提交”/></form>

表单样式

<!doctype html><html><head><meta charset="utf-8"><title>CSS控制表单样式</title> <style type="text/css">body{ font-size:12px; font-family:"宋体";}body,form,input,p{ padding:0; margin:0; border:0;}form{              width:320px;              height:150px;              padding-top:20px;              margin:50px auto;              background:#f5f8fd;              border-radius:20px;              border:3px solid #4faccb;}p{              margin-top:15px;              text-align:center;}p span{              width:40px;              display:inline-block;              text-align:right;}.num,.pass{              width:152px;              height:18px;              border:1px solid #38a1bf;    padding:2px 2px 2px 22px;}.num{               background:url(images/1.jpg) no-repeat 5px center #FFF;               color:#999;}.pass{               background:url(images/2.jpg) no-repeat 5px center #FFF;}.btn01,.btn02{              width:60px;              height:25px;              border-radius:3px;              border:1px solid #6b5d50;              margin-left:30px;}.btn01{ background:#3bb7ea;}.btn02{ background:#fb8c16;}</style> <link rel="stylesheet" href="Untitled-1.css" type="text/css"></head><body><form action="#" method="post">                   <p>    登录：<input type="tel" name="telphone" pattern="^\d{11}$" required/>     </p>      <p>    密码：<input type="tel" name="telphone" pattern="^\d{11}$" required/>    </p>    <p>        <input type="button" class="btn01" value="登录"/>        <input type="button" class="btn02" value="注册"/>   </p></form></body></html>

文章推荐

html5+css3 |表单的应用

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集