Open Qingquan-Li opened 7 years ago
通俗的讲,表单就是一个将用户信息组织起来的容器。将需要用户填写的内容放置在表单容器中,当用户点击“提交”按钮时,表单会将数据统一发送给服务器。 典型的应用场景:登录注册、网上订单信息填写、调查问卷、搜索。
<form>
<input>
<textarea>
<label>
<fieldset>
<legend>
<select>
<optgroup>
<option>
<button>
<datalist>
<keygen>
<output>
语法:
<form action="表单提交地址" method="提交方法"> 文本框、按钮等表单元素... </form>
注意:
多数情况下被用到的表单标签是输入标签( <input> )。输入类型是由类型属性(type)定义的
<input name="表单元素名称" type="类型" value="值" size="显示宽度" maxlength=“最大长度" checked="是否选中" />
注意 :
<input type="checkbox">
<input type="radio">
HTML 表单 - 输入元素:
<input type="text" name="username" />
<input type="password" name="password" />
<input type="radio" name="gender" value="male" />男
<input type="radio" name=" gender" value="female" />女
<input type="checkbox" name="hobby" value="reading" />阅读
<input type="checkbox" name="hobby" value="drawing" />绘画
<input type="button" value="播放音乐" />
<input type="reset" value="重置" />
<input type="submit" value="提交" />
<input type="file" name="files" />
<input type="hidden" name="name" value="1" />
PS:
HTML <input> value 属性:
value 属性规定 <input> 元素的值。
value 属性对于不同 input 类型,用法也不同:
注意:value 属性对于 <input type="checkbox" /> 和 <input type="radio" /> 是必需的。 注意:value 属性不适用于 <input type="file" />。
<input type="checkbox" />
<input type="radio" />
<input type="file" />
在后台如果你想得到复选框的内容 就是value 来取。 当你在接收表单数据的页面中获取数据时,得到的就是value的值。
name-value:
<select name="指定列表名称" size="显示的行数"> <option value="选项值" selected="selected">…</option> <option value="选项值" >…</option> </select>
<textarea name="naem" cols="列宽" rows="行宽"> 文本内容 </textarea>
表单的高级用法
<label for="关联元素ID"></label>
示例_点击 label 标签鼠标聚焦文本框中:
<label for="username">姓名: </label> <input name="name" id="username" size="20"/>
或:
<label>姓名:<input name="name" size="20"/></label>
示例:
用户须知: <textarea readonly="readonly"> 用户需遵循以下协定: xxxxx </textarea> <input type="submit" name="register" value="注册" disabled="disabled"/>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>表单</title> </head> <body> <form action="" method="post"> <!--文本框、密码框--> <p>用户名:<input name="name" type="text" value="Fatli" /></p> <p>密 码:<input name="password" type="password" /></p> <!--单选按钮、复选框--> <p> 性别: <input name="gender" type="radio" value="man" />男 <input name="gender" type="radio" value="woman" />女 <!--对表单元素进行标注(增强鼠标的可用性)--> <input name="gender" type="radio" value="anthor" id="anthor" /> <label for="anthor">其他</label> </p> <p> 爱好: <input name="insterest" type="checkbox" value="sports" checked="checked"/>运动 <input name="insterest" type="checkbox" value="it" />IT <input name="insterest" type="checkbox" value="it" />音乐 </p> <!--列表框--> <p> 出生日期: <input name="birthYear" size="2" maxlength="4" />年 <select name="birthMonth"> <option value="1">一月</option> <option value="2">二月</option> <option value="3">三月</option> <option value="4">四月</option> <option value="5">五月</option> <option value="6">六月</option> <option value="7">七月</option> <option value="8">八月</option> <option value="9">九月</option> <option value="10">十月</option> <option value="11">十一月</option> <option value="12">十二月</option> </select>月 <input name="birthDay" size="2" maxlength="4" />日 </p> <!--按钮--> <p> <input type="button" name="butButton" value="button按钮" onClick="alert(this.value)"> <input type="submit" name="butSubmit" value="submit按钮"> <input type="reset" name="butReset" value="reset按钮"> </p> </form> </body> </html>
<!--多行文本域--> <form action="" method="post"> <span style="white-space:pre"> </span><p> <span style="white-space:pre"> </span>自我评价:<br /> <span style="white-space:pre"> </span><textarea name="textarea" cols="10" rows="2"></textarea> <span style="white-space:pre"> </span></p> </form>
<!--文件域--> <!--提交包含文件域的表单时,由于提交的表单数据包括普通的表单数据、文件数据等多部分内容,所以必须设置表单的 "enctype" 编码属性为 "multipart/form-data",表示将表单数据分为多部分提交--> <form action="" method="post" enctype="multipart/form-data"> <p> <input type="file" name="files" /><br /> <input type="submit" name="upload" value="上传" /> </p> </form>
<!--隐藏域--> <form action="" method="get"> <!--文本框、密码框--> <p>用户名:<input name="name2" type="text" /></p> <p>密 码:<input name="password2" type="password" /></p> <p><input type="submit" value="提交" /></p> //将隐藏域的 name 属性命名为 userid,而 value 属性的值就对应为用户的 userid <p><input type="hidden" name="userid" value="666" /></p> </form>
<!--表单的只读(eg协议)与禁用(eg先同意协议再注册)设置--> <form action="" method="get"> <p>用户名:<input type="text" name="name3" value="Xenia(只读)" readonly /></p> <p> 用户须知:<br /> <textarea cols="20" rows="10" readonly> 用户需遵循以下协定(Fatli CO.,LTD.保留最终解释权): 一、xxxxx 二、xxxxx </textarea> </p> <p><input type="submit" name="register" value="注册" disabled="disabled"></p> </form>
<!--语义化的表单:页面结构更合理、见名知义、更符合Web标准-SEO优化--> <!--未使用语义化的标签--> <table> 学生信息表<br /> <tr> <td>姓名</td> <td>职务</td> </tr> <tr> <td >张三</td> <td >班长</td> </tr> </table> <!--使用语义化的标签--> <table width="270"> <caption>学生信息表</caption> <thead> <tr> <th>姓名</th> <th>职务</th> </tr> </thead> <tbody> <tr> <td align="center">张三</td> <td align="center">班长 </td> </tr> </tbody> </table> <br /> <!--未语义化的表单--> <form> 用户信息:<br /> 姓名:<input type="text" /> 年龄:<input type="text" /><br /> 手机:<input type="text" /> 邮箱:<input type="text" /> </form> <br /> <!--语义化的表单--> <form> <fieldset> <legend>用户信息:</legend> 姓名:<input type="text" /> 年龄:<input type="text" /><br /> 手机:<input type="text" /> 邮箱:<input type="text" /> </fieldset> </form>
——END
HTML 表单标签
<form>
<input>
<textarea>
<label>
<input>
元素的标签,一般为输入标题,可改进鼠标可用性<fieldset>
<legend>
<fieldset>
元素的标题<select>
<optgroup>
<option>
<button>
<datalist>
<keygen>
<output>
常见的表单元素
表单基本结构
<form>
标签语法:
注意:
表单基本元素
<input>
标签语法:
注意 :
<input type="checkbox">
或<input type="radio">
配合使用,选中值为 checkedHTML 表单 - 输入元素:
<input type="text" name="username" />
<input type="password" name="password" />
<input type="radio" name="gender" value="male" />男
<input type="radio" name=" gender" value="female" />女
<input type="checkbox" name="hobby" value="reading" />阅读
<input type="checkbox" name="hobby" value="drawing" />绘画
<input type="button" value="播放音乐" />
<input type="reset" value="重置" />
<input type="submit" value="提交" />
<input type="file" name="files" />
<input type="hidden" name="name" value="1" />
PS:
HTML
<input>
value 属性:value 属性规定
<input>
元素的值。value 属性对于不同 input 类型,用法也不同:
注意:value 属性对于
<input type="checkbox" />
和<input type="radio" />
是必需的。 注意:value 属性不适用于<input type="file" />
。在后台如果你想得到复选框的内容 就是value 来取。 当你在接收表单数据的页面中获取数据时,得到的就是value的值。
name-value:
列表框
文本域
表单的高级用法
关联表单元素(表单元素的标注)
语法:
示例_点击 label 标签鼠标聚焦文本框中:
或:
只读属性、禁用属性
示例:
附 Demo代码示例
1. 普通表单
2. 多行文本域
3. 文件域
4. 隐藏域(表单数据隐藏提交,用 method="get" 提交可以在地址栏看到提交的参数)
5. 表单的只读与禁用
6. 语义化的表单
——END