提交按钮是一种特殊的按钮，不需要设置onclick参数，在单击该类按钮时可以实现表单内容的提交。语法:<input type="submit" name="按钮名" value="按钮的取值"/>；重置按钮可以清除表单的内容，恢复默认的表单内容设定，语法:<input type="reset" name="按钮名" value="按钮的取值"/>
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>在表单中添加提交、重置按钮</title> 6 </head> 7 <form action="mailto:[email protected]" method="post" name="invest" enctype="text/plain"> 8 姓名: 9 <input type="text" name="username" size="20"/> 10 <br/> 11 <br/> 12 网址: 13 <input type="text" name="URL" size="20" maxlength="50" value="http://"/> 14 <br/> 15 <br/> 16 密码: 17 <input type="password" name="password" size="20" maxlength="8"/> 18 <br/> 19 <br/> 20 确认密码: 21 <input type="password" name="qurpassword" size="20" maxlength="8"/> 22 <br/> 23 <br/> 24 请选择你喜欢的音乐: 25 <input type="checkbox" name="m1" value="rock"/> 26 摇滚乐 27 <input type="checkbox" name="m2" value="jazz"/> 28 爵士乐 29 <input type="checkbox" name="m3" value="pop"/> 30 流行乐<br/> 31 <br/> 32 请选择你居住的城市: 33 <input type="radio" name="city" value="beijing"/> 34 北京 35 <input type="radio" name="city" value="beijing"/> 36 上海 37 <input type="radio" name="city" value="beijing"/> 38 南京<br/> 39 <br/> 40 <input type="submit" name="submit" value="提交表单"/> 41 <input type="reset" name="cx" value="重置按钮"/> 42 </form> 43 <body> 44 </body> 45 </html>
图像域是指可以用在提交按钮位置上的图片，这幅图片具有按钮的功能，语法:<input type="image" src="图像地址" name="图像域名称"/>；表单中的隐藏域主要用来传递一些参数，而这些参数不需要在页面中显示。当用户提交表单时，隐藏域的内容会一起提交给处理程序，语法:<input type="hidden" name="隐藏域名称" value="提交的值"/>；文件域在上传文件时常常用到，它用于查找硬盘中的文件路径，然后通过表单将选中的文件上传，语法:<input type="file" name="文件域的名称"/>
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>表单</title> 6 </head> 7 <form action="mailto:[email protected]" method="post" name="invest" enctype="text/plain"> 8 姓名: 9 <input type="text" name="username" size="20"/> 10 <br/> 11 <br/> 12 网址: 13 <input type="text" name="URL" size="20" maxlength="50" value="http://"/> 14 <br/> 15 <br/> 16 密码: 17 <input type="password" name="password" size="20" maxlength="8"/> 18 <br/> 19 <br/> 20 确认密码: 21 <input type="password" name="qurpassword" size="20" maxlength="8"/> 22 <br/> 23 <br/> 24 请上传你的照片: 25 <input type="file" name="file"/> 26 <br/> 27 <br/> 28 请选择你喜欢的音乐: 29 <input type="checkbox" name="m1" value="rock"/> 30 摇滚乐 31 <input type="checkbox" name="m2" value="jazz"/> 32 爵士乐 33 <input type="checkbox" name="m3" value="pop"/> 34 流行乐<br/> 35 <br/> 36 请选择你居住的城市: 37 <input type="radio" name="city" value="beijing"/> 38 北京 39 <input type="radio" name="city" value="beijing"/> 40 上海 41 <input type="radio" name="city" value="beijing"/> 42 南京<br/> 43 <br/> 44 <input type="image" src="1.jpg" name="image1" width="160" height="160"/> 45 <input type="image" src="2.jpg" name="image2" width="160" height="160"/> 46 <input type="hidden" name="form" value="invert"/> 47 </form> 48 <body> 49 </body> 50 </html>
列表和菜单都是通过<select>和<option>标记来实现的，语法:<select name="下拉菜单的名称" size="显示的选项数目" multiple="列表中的项目多选"><option value="选项值" selected="selected">选项显示内容</option></select>
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜单的插入</title> 6 </head> 7 <body> 8 <h3>兴趣调查</h3> 9 <form action="mailto:[email protected]" method="post" name="invest"> 10 请选择你喜欢的音乐:<br/> 11 <br/> 12 <select name="music" size="5" multiple> 13 <option value="rock">摇滚乐</option> 14 <option value="pop">流行乐</option> 15 <option value="jazz" selected>爵士乐</option> 16 <option value="folk">民族乐</option> 17 <option value="dj">打击乐</option> 18 </select> 19 <br/> 20 <br/> 21 <select name="city"> 22 <option value="beijing">北京</option> 23 <option value="shanghai">上海</option> 24 <option value="nanjing">南京</option> 25 <option value="changchun">长春</option> 26 </select> 27 <input type="submit" name="submit" value="提交表单"/> 28 </form> 29 </body> 30 </html>
文字域或文本域可以添加多行文字，从而可以输入更多的文本，语法:<textarea name="文本域名称" value="文本域默认值" rows="行数" cols="列数"></textarea>；在HTML中，id用来标记页面的唯一元素
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>添加文本域</title> 6 </head> 7 <body> 8 用户调查留言:<br/> 9 <br/> 10 <form action="mailto:[email protected]" method="post" name="invest"> 11 用户名： 12 <input name="username" id="username" type="text" size="20"/> 13 <br/> 14 <br/> 15 密码： 16 <input name="password" type="password" size="20"/> 17 <br/> 18 <br/> 19 留言： 20 <textarea name="liuyan" rows="5" cols="40">留言 21 </textarea> 22 </form> 23 </body> 24 </html>
时间： 2024-10-26 16:43:20