软件测试工程师之必备html知识，框架的设计之HTML表单设计

最新推荐文章于 2024-10-16 16:55:14 发布

原创最新推荐文章于 2024-10-16 16:55:14 发布 · 152 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了HTML表单的各种元素，包括文本框、密码框、单选框、复选框、隐藏域、多行文本域、下拉列表及提交和重置按钮的使用方法。

什么是表单：

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（<form>）定义。
<form> <input /></form> [1]
主要讲述以下几个部分

表单标记：<form></form> action 服务器地址，接受表单内容的地址 name 表单名称

method：提交方式 get和post方式，注意两个区别

注意：一般提交表单用的是post的，很少用get

注意：submit按钮，必须要放在form标签中，才有效，如果放在外面就是一个普通的button

重置按钮，不是清空的意思，是返回初始状态，也必须要放在form表单中去

第二：文本框和密码代码如下：

<form>

账号：<input type="text" name="userID" value="张三" /> <br />
密码：<input type="password" name="userpassword" /> <br /></form>

按钮，注意，submit按钮和rest按钮，必须要放在form里面，不然，submit按钮就只能相当于一个普通按钮了

单选框和复选框：单选框name的名称要保持一致，初始化选中checked="checked"

性别：<input type="radio" value="男" name="sex" checked="checked"/>男
<input type="radio" value="男" name="sex"/>女
<input type="radio" value="男" name="sex"/>保密
<br />
兴趣爱好：<input type="checkbox" name="xq" value="LOL" checked="checked"/>LOL
<input type="checkbox" name="xq" value="DOTA"/>DOTA
<input type="checkbox" name="xq" value="看小说"/>看小说
<br />
都可以使用checked属性来设置默认选中项

隐藏域：<input type="hidden" name="userNUber" value="10001" />，hidden隐藏表单，页面上不会显示，但是在查看源代码或者提交表单在url里面可以看到

多行文本域：textarea：多行文本框，一般最常用的是设置宽度或者高度

下拉列表域：select 标记和option选项

学院：<select name="dx" size="3">
<option value="01">北京大学</option>
<option value="02">清华大学</option>
<option value="03">哈佛大学</option>
<option value="03">天津大学</option>
<option value="03">上海大学</option>
<option value="03">南京大学</option>

</select><br />

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <form action="" method="get" enctype="application/x-www-form-urlencoded">
           <input type="hidden" name="userNUber" value="10001" />
           账号：<input type="text" name="userID" value="张三" /> <br />
           密码：<input type="password" name="userpassword" /> <br />
           <input type="submit" value="登陆" />
           <input type="reset" value="重置"/><br />
           <br />
           头像：<input type="file" /><br />
           性别：<input type="radio" value="男" name="sex" checked="checked"/>男
           <input type="radio" value="男" name="sex"/>女
           <input type="radio" value="男" name="sex"/>保密
           <br />
           兴趣爱好：<input type="checkbox" name="xq" value="LOL" checked="checked"/>LOL
           <input type="checkbox" name="xq" value="DOTA"/>DOTA
           <input type="checkbox" name="xq" value="看小说"/>看小说
           <br />
           学院：<select name="dx" size="3">
               <option value="01">北京大学</option>
               <option value="02">清华大学</option>
               <option value="04">哈佛大学</option>
               <option value="05">天津大学</option>
               <option value="06">上海大学</option>
               <option value="07">南京大学</option>
           </select><br />
<br />
备注：<br /><textarea cols="50" rows="10">

</textarea>
       </form>
   </body>
</html>