表单是网页中最常见的元素,也是用户和我们交互的重要手段,在网站中的登录、注册、信息更新这些功能都是依赖表单实现的。在HTML中对于表单提供了一系列的标签,即输入框、下拉框、按钮、文本域,如下是一个最常见的表单结构内容:
1 <form method="" action="" enctype="multipart/form-data(提交表单中有文件设置)"> 2 <!-- 输入框-文本框 --> 3 <input type="text" name="文本框名称"/> 4 <!-- 输入框-密码框 --> 5 <input type="password" name="密码框名称"/> 6 <!-- 输入框-单选按钮(通常是一对) --> 7 <input type="radio" name="单选按钮名称" value="单选按钮值"/>描述文本(页面显示内容) 8 <!-- 输入框-复选框(通常是 name属性相同的一组) --> 9 <input type="checkbox" name="复选框名称" value="复选框值"/>描述文本(页面显示内容) 10 <!-- 输入框-文件域(注意此时必须设置表单的 enctype 属性) --> 11 <input type="file" name="文本框名称"/> 12 <!-- 下拉列表 --> 13 <select name="下列框名称"> 14 <option value="下拉列表选项值(通常是一组)">下拉列表选项(页面显示内容) </option> 15 </select> 16 <!-- 按钮-普通 --> 17 <input type="button" name="按钮名称" value="按钮页面显示文字"> 18 <!-- 按钮-提交 --> 19 <input type="submit" name="按钮名称" value="按钮页面显示文字"> 20 <!-- 按钮-重置 --> 21 <input type="reset" name="按钮名" value="按钮页面显示文字"> 22 </form>
表单结构
1 <form action="" method="POST" enctype="multipart/form-data"> 2 用户名:<input type="text" name="username"/> 3 4 <input type="submit" name="提交按钮"/> 5 </form>
如上是一个最简单的表单结果,在表单结构中需要我们掌握的内容除了表单相关的标签外,就是表单的属性。action 属性,指向服务器处理表单的程序地址,而method属性指定浏览器处理表单的方式,常用的方法包括GET、POST,如下是我们总结的一些关于这两种方式的区别:
GET,这种方法在表单提交的时候比较快,但是表单中的数据会显示在浏览器的地址栏中,所以这种方式不太安全。
POST,这种方法在提交表单的时候会对表单内容进行封装,不会显示在地址栏中,所以这种方式比较安全,不过在速度上不如GET方式。
输入框
<p> 用户名:<input type="text" name="username"/> </p> <p> 密 码:<input type="password" name="password"/> </p> <p> 性 别: <input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女 </p> <p> 爱 好: <input type="checkbox" name="hobbies"/>读书 <input type="checkbox" name="hobbies"/>打游戏 <input type="checkbox" name="hobbies"/>旅游 <input type="checkbox" name="hobbies"/>爬山 </p> <p> 上传文件: <input type="file" name="uploadfile"/> </p> <p> 隐藏域: <input type="hidden" name="userid" value="0000011101010"/> </p>
如上就是表单的中输入框内容,输入框依赖的是<input>标签,不同的输入框实现是通过它的type属性实现的,关于type属性的值包括可用的选项包括 text(普通文本输入)、password(密码框) 、checkbox(复选框)、radio(单选按钮)、submit(提交按钮)、reset(重置按钮)、file(文件域)、hidden(隐藏域),默认为 text。
按钮
<p> <button type="button">普通按钮</button> <button type="submit">提交按钮</button> <button type="reset">重置按钮</button> </p> <p> <input type="button" value="普通按钮"/> <input type="submit" value="提交按钮"/> <input type="reset" value="重置按钮"/> </p>
如上就是表单中实现按钮的方式,可以通过<button>标签,也可以通过<input>标签,不论使用哪种方式,我们都会发现这些按钮都可以分为三类,即普通按钮、提交按钮、重置按钮,指定按钮形式都是依赖type属性指定的。在这里需要注意的是<button>按钮指定描述文本是在标签中的描述文本,而<input>标签指定按钮的描述文本是通过value属性。
下拉框
<p> 省: <select name="province"> <option selected>--- 请选择 ---</option> <option value="0001">河北省</option> <option value="0002">山西省</option> <option value="0003">陕西省</option> </select> </p>
下拉框可以方便用户输入,具体的内容如上所示。
文本域
<textarea name="content" cols="80" rows="10"> 测试 </textarea>
文本域可以让我们输入大段的文字,需要注意的是文本域和输入框不同的地方是,文本域的默认值是标签中的文本,输入框是通过value属性指定的。