软件测试基础-Web前端(二)

  • Post author:
  • Post category:其他




表单的基本介绍


表单:

表单就是一种在互联网上用于收集用户输入信息的一种结构,在HTML中实现定义好的一个标签来完成这件事。标签名称叫form,是一个双标签。

<form action="#" method="get">
			用户名:<input type="text" name="username"/>
			<br>
			密码框:<input type="password" name="password" />
			
			<input type="submit" />
		</form>

注:

1.form 标签是HTML当中定义好的一个用来表示整个表单结构的双标签,称之为表单域。

2.form 默认相当于一张白纸,如果想让它收集用户的相关信息,HTML中又准备了很多的表单标签,这里的标签使用最多的就是input。

3.action 属性值表示当前表单中的数据提交到哪里。

4.method 属性值表示以什么样式提交当前表单中的数据,最常见的就是get和post,其中get方式就是指将数据放在url 中进行提交,这种方式是明文,所以相对不安全。post 方式就是指将数据写在 HTTP 请求的请求体当中。


常见的表单元素


form 标签指负责定义具体的表单整体,如果想要收集用户数据,必须要又一些能够让用户进行输入填写的模块,此时 HTML 当中就定义许多的 表单标签,来让用户输入,最常见的表单标签就是input,因为标签名称都叫input,所以HTML当中就是设置了type属性进行区分。


1.文本输入框:

用户名:<input type="text" name="username" placeholder="请输入用户名"/>

运行结果:

运行结果


2.密码输入框:

密码框:<input type="password" name="password" placeholder="请输入密码" />

运行结果:

在这里插入图片描述


3.提交按钮:

<input type="submit" />


4.单选框:

<input type="radio" name="gender" /> 


5.复选框:

<input type="checkbox" />


6.文本域:

<textarea name="" rows="10(行数)" cols="40(列数)">


7.下拉框:

		<select name="">
			<option value="微信支付">微信支付</option>
			<option value="支付宝支付">支付宝支</option>
		</select>


8.重置按钮:

<input type="reset" value="重置" />

注:单标签,当重置按钮被点击,包含它的表单中所有输入元素的值都重置为它们的默认值


9.普通按钮:

<input type="button" value="注册">

注:单标签,定义可点击的按钮,例如跳转页面;

更多关于input的type属性请请参考:

HTML type 属性


表单元素细节


1.name 属性:在form 表单通过不同的表单元素来收集数据,在这个过程中用很多的表单元素名称都叫input ,如果直接将数据提交到后台,就会出现这些数据无法区分的问题,为了分别那个数据属于什么样的表单选项,就在input 身上设置name属性,这样一来在后端之后就会变成以下格式,例如:

2.valu :它的作用就是用来定义某些表单元素的默认内容(文本输入框、提交按钮、重置按钮、普通按钮)

3.checke:这是一个属性并且它的属性值就等于这个属性名。用来设置单选和复选框中的默认杯选中的某些。

PS:更多的代码还需要小伙伴们自己去亲手尝试才能发现其中的乐趣哦! 祝每个刚转行或者想转行的小伙伴接下来都可以顺顺利利找到自己喜欢的工作,加油!!!💪



版权声明:本文为weixin_42880611原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。