HTML表单框架
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>HTML表单框架</title> 6 </head> 7 <!-- 8 表单：表单是提供让读者在网页上输入，勾选和选取数据，以便提交给服务器数据库的工具。（用于将信息提交给服务器） 9 <form>...</form>标记： 10 作用：用于创建一个表单,定义表单的开始和结束，他是一个容器，用于包含其他表单元素，比如文本框，单选框等。表单元素必须在form标记内才有效 11 属性： 12 action=url(传送的目标，处理表单信息的服务器端应用程序) 13 method=处理表单数据的方法（POST/GET(默认)） 注：POST方法可以传递大量的数据 14 GET方法将值附加到请求该页的URL中，适合传递少量的数据 15 name=表单名称 16 17 所有表单元素都要放置在form标签中。 18 所有的表单元素，以input为例，必须包含type属性和name属性 19 --> 20 <body> 21 <form action="8-新闻网页案例.html" method="post" name=""> 22 <table border="1" width="300" align="center" cellpadding="5"> 23 <tr> 24 <td>用户名：</td> 25 <td><input type="text"/ name="username"></td> 26 </tr> 27 <tr> 28 <td colspan="2"><input name="提交" type="submit" value="提交"/></td> 29 30 </tr> 31 </table> 32 </form> 33 34 35 36 <hr/> 37 <h2>登录界面</h2> 38 <form action="14-框架案列-top.html" method="post"> 39 用户名：<input type="text" name="username"/><br/> 40 密 码：<input type="password" name=""pwd/><br /> 41 <input type="submit" value="登录"/> 42 <input type="reset" value="重置"/> 43 </form> 44 </body> 45 </html>
表单详解：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>HTML表单详解</title> 6 </head> 7 8 <body> 9 <form action="8-新闻网页案例.html" method="post" name="会员注册"> 10 <!-- 11 表单外框： 12 <fieldset>...</filedset>:定义围绕在表单中元素的边框 13 <legend>...</legend>:为filedset标签定义标题 14 --> 15 <fieldset> 16 <legend>会员注册</legend> 17 <table border="0" width="550" align="center" cellpadding="5"> 18 19 20 <!-- 21 单行文本框：<input type="text" name=文本框名称 value=默认初始值 size=显示字符数 maxlength=最多容纳字符数 readonly="readonly"(设置为只读 ,用于当注册完之后，如果用户想修改个人的一些信息，但有些是不可以修改的，就设置为只读。) disabled="disabled"(设置为不可操作)/> 22 --> 23 <tr> 24 <td>用户名：</td> 25 <td><input type="text" name="username" maxlength="5" size="5"/><font color="#00FFFF" size="2">请输入中文名称</font></td> 26 </tr> 27 28 29 30 31 32 33 34 <!-- 35 密码框：<input type="password" name=文本框名称" 称 value=默认初始值 size=显示字符数 字符数 maxlength=最多容纳字符数 ,readonly="readonly"(设置为 只读,用于当注册完之后，如果用户想修改个人的一些信息，但有些是不可以修改的，就设置为只读。)/> 36 --> 37 <tr> 38 <td>密码：</td> 39 <td><input type="password" name="password1" maxlength="16"/><font color="#00FFFF" size="2">请输入英文或数字，最多只能输入16位</font> </td> 40 </tr> 41 <tr> 42 <td>确认密码：</td> 43 <td><input type="password" name="password2" maxlength="16" /></td> 44 </tr> 45 46 47 48 <!-- 49 50 --> 51 <tr> 52 <td>年龄：</td> 53 <td><input type="text" name="age" /></td> 54 </tr> 55 56 57 58 59 60 61 <!-- 62 单选框：<input type="radio" name="单选框名称" value="提交值" checked="checked"(是否被选中，默认选中)/> 63 64 <lable>标注内容</lable>:为input标签定义标注： 65 属性：for（与关联的相关元素的id相同） 66 如：<lable for="man">男</label> 67 <input type="radio" name="sex" value="男" id="man"/> 68 --> 69 <tr> 70 <td>性别：</td> 71 <td> 72 <fieldset> 73 <legend>请选择性别</legend> 74 <input type="radio" name="sex" value="男" checked="checked"/>男 75 <input type="radio" name="sex" value="女" />女 76 </fieldset> 77 </td> 78 </tr> 79 <tr> 80 <td>性别：</td> 81 <td> 82 <label for="man">男</label> 83 <input type="radio" name="sex" value="男" checked="checked" id="man"/> 84 <label for="women">女</label> 85 <input type="radio" name="sex" value="女" id="women" /> 86 </td> 87 </tr> 88 89 90 91 92 93 <!-- 94 下拉列表：<select name="列表框名称"> 95 <option selected="selected"添加到哪个(哪个为初始选择，就添加selected属性) value="提交值(一定要写这个值)">列表1 </option> 96 <option value="提交值">列表2 </option> 97 </select> 98 --> 99 <tr> 100 <td>所在城市：</td> 101 <td> 102 <select name="citys"> 103 <option value="北京">北京 </option> 104 <option value="上海">上海 </option> 105 <option value="杭州">杭州 </option> 106 <option value="广州">广州 </option> 107 <option value="深圳">深圳 </option> 108 <option value="河源" selected="selected">河源</option> 109 </select> 110 </td> 111 </tr> 112 <!-- 113 分组 <optgroup label="分组名称"></optgroup> 114 --> 115 <tr> 116 <td>城市中的地区：</td> 117 <td> 118 <select name="citys"> 119 <optgroup label="广州"></optgroup> 120 <option value="海珠区">海珠区 </option> 121 <option value="天河区">天河区 </option> 122 <option value="萝岗区">萝岗区 </option> 123 <option value="花都区">花都区</option> 124 <option value="番禺区">番禺区 </option> 125 <option value="越秀区" selected="selected">越秀区</option> 126 <optgroup label="河源"></optgroup> 127 <option value="紫金县">紫金县 </option> 128 <option value="和平县">和平县 </option> 129 <option value="连平县">连平县 </option> 130 <option value="东源县">东源县</option> 131 <option value="龙川县">龙川县 </option> 132 133 </select> 134 </td> 135 </tr> 136 137 138 <!-- 139 列表标记的另一种用法： 140 <select name="列表框名称" size="显示的行数" multiple(如果允许多选，则有该属性，否则没有改属性)> 141 <option value="提交值">列表1 </option> 142 ..... 143 </select> 144 --> 145 <tr> 146 <td>交友目的：</td> 147 <td> 148 <select name="target" size="4" multiple="multiple"> 149 <option value="普通朋友">普通朋友 </option> 150 <option value="爱人">爱人 </option> 151 <option value="同行">同行 </option> 152 <option value="爱好">爱好 </option> 153 154 </select> 155 </td> 156 </tr> 157 158 159 160 161 162 163 <!-- 164 多选框：<input type="checkbox" name="复选框名称" value="提交值" "checkbox=""checkbox"(是否被选中)/>篮球 165 --> 166 <tr> 167 <td>爱好：</td> 168 <td> 169 <input type="checkbox" name="love" value="篮球" checked="checked"/>篮球 170 <input type="checkbox" name="love" value="音乐"/>音乐 171 <input type="checkbox" name="love" value="美术"/>美术 172 <input type="checkbox" name="love" value="睡觉"/>睡觉 173 </td> 174 </tr> 175 176 177 178 <!-- 179 浏览框：<input type="file" name="名称" size="显示框的长度"/> 180 --> 181 <tr> 182 <td>照片上传：</td> 183 <td><input type="file" name="mypic" size="20"/></td> 184 </tr> 185 186 187 188 <!-- 189 多行文本框： 190 <textarea name="多行文本框名称" cols="每行中的字符数" rows="显示的行数"> 191 初始内容（可以不写） 192 </textarea> 193 --> 194 <tr> 195 <td colspan="2"> 196 <fieldset> 197 <legend>自我评价</legend> 198 <textarea name="" cols="65" rows="5"> 199 初始内容（可以不写） 200 </textarea> 201 </fieldset> 202 </td> 203 </tr> 204 205 206 <!-- 207 隐藏域：（用于传递一些信息，比如用户的ip地址等，在网页中是不显示的,只要写在from标签内就可以） 208 <input name="名称" type="hidden" value="提交值"/> 209 --> 210 211 212 213 214 215 216 <tr> 217 <td colspan="2"> 218 <!-- 219 按钮：（属性：name="按钮名称" value="按钮显示文本"） 220 提交：submit 221 重置：reset 222 普通按钮：button 223 --> 224 <input type="submit" value="提交" /> 225 <input type="reset" value="取消"/> 226 <input type="button" value="欢迎" onclick="alter(‘你好‘);"/> 227 228 229 <!-- 230 图片按钮：<input type="image" name="图片按钮名称" src="图片路径"/> 231 --> 232 <input type="image" name="image" src="../../imgs/Default_36.gif"/> 233 </td> 234 235 </tr> 236 </table> 237 </fieldset> 238 </form> 239 </body> 240 </html>
HTML表单外框标签：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>HTML表单外框标签</title> 6 </head> 7 8 <body> 9 <!-- 10 最外层加一个一行一列的表格是为了控制域的大小 11 --> 12 <table width="700" align="center"> 13 <tr> 14 <td> 15 <form action="8-新闻网页案例.html" method="post" name="域名注册"> 16 <fieldset> 17 <legend>域名注册</legend> 18 19 <table width="550" border="0" cellpadding="5" align="center"> 20 21 <tr> 22 <td colspan="2"><b>请填写域名信息(请您务必填写真实，有效和完整的域名注册信息</b></td> 23 </tr> 24 25 26 27 28 <tr> 29 <td align="right">登录账号：</td> 30 <td align="left"> 31 <input type="text" name="user" /> 32 </td> 33 </tr> 34 35 36 <tr> 37 <td align="right">密码：</td> 38 <td align="left"> 39 <input type="password" name="password" maxlength="16"/> 40 </td> 41 </tr> 42 43 44 <tr> 45 <td align="right">性别：</td> 46 <td align="left"> 47 <input type="radio" name="sex" value="男" checked="checked" />男 48 <input type="radio" name="sex" value="女"/>女 49 </td> 50 </tr> 51 52 53 <tr> 54 <td align="right">注册网址：</td> 55 <td align="left"> 56 <input type="text" name="url" value="www."/> 57 </td> 58 </tr> 59 60 61 <tr> 62 <td align="right">注册网址后缀：</td> 63 <td align="left"> 64 <input type="checkbox" name="houzhui" value=".com" checked="checked"/>.com 65 <input type="checkbox" name="houzhui" value=".cn" />.cn 66 <input type="checkbox" name="houzhui" value=".net" />.net 67 <input type="checkbox" name="houzhui" value=".org" />.org 68 </td> 69 </tr> 70 71 72 <tr> 73 <td align="right">域名所有者(中文)：</td> 74 <td align="left"> 75 <input type="text" name="author1"/> 76 </td> 77 </tr> 78 79 80 <tr> 81 <td align="right">域名所有者(英文)：</td> 82 <td align="left"> 83 <input type="text" name="author2"/> 84 </td> 85 86 </tr> 87 88 89 <tr> 90 <td align="right">所属区域：</td> 91 <td align="left"> 92 <select name="country"> 93 <option value="中国" selected="selected">中国 </option> 94 <option value="蒙古">蒙古 </option> 95 <option value="朝鲜">朝鲜 </option> 96 <option value="韩国">韩国 </option> 97 <option value="日本">日本 </option> 98 <option value="西班牙">西班牙</option> 99 <option value="新西兰">新西兰</option> 100 <option value="德国">德国</option> 101 <option value="美国">美国</option> 102 <option value="法国">法国</option> 103 <option value="英国">英国</option> 104 </select> 105 <select name="citys"> 106 <option value="省份" selected="selected">-省份-</option> 107 <optgroup label="中国"></optgroup> 108 <option value="北京">北京</option> 109 <option value="河南省">河南省 </option> 110 <option value="湖南省">湖南省 </option> 111 <option value="广东省">广东省</option> 112 <option value="江苏省">江苏省 </option> 113 <option value="四川省" >四川省</option> 114 <optgroup label="美国"></optgroup> 115 <option value="迈阿密">迈阿密 </option> 116 <option value="芝加哥">芝加哥 </option> 117 <option value="洛杉矶">洛杉矶 </option> 118 </select> 119 </td> 120 </tr> 121 122 123 124 <tr> 125 <td align="right">单位所在地：</td> 126 <td align="left"> 127 <input type="text" name="danwei"/> 128 </td> 129 </tr> 130 131 132 133 <tr> 134 <td align="right">单位负责人：</td> 135 <td align="left"> 136 <input type="text" name="fuzeren"/> 137 </td> 138 </tr> 139 140 141 142 <tr> 143 <td align="right">通信地址：</td> 144 <td align="left"> 145 <input type="text" name="tongxindizhi"/> 146 </td> 147 </tr> 148 149 150 151 <tr> 152 <td align="right">联系电话：</td> 153 <td align="left"> 154 <input type="text" name="phoneNumber" maxlength="11"/> 155 </td> 156 </tr> 157 158 159 160 <tr> 161 <td colspan="2" align="center"> 162 <input type="submit" value="提交"/> 163 <input type="reset" value="重置"/> 164 </td> 165 166 167 </tr> 168 </table> 169 </fieldset> 170 </form> 171 </td> 172 </tr> 173 </table> 174 </body> 175 </html>