表单的应用

  • 时间:
  • 浏览:
  • 来源:互联网

表单的应用

表单元素有 :文本框,按钮,单选,复选,下拉列表,文本域
目录

  1. input的应用
  2. 文本域textarea的应用
  3. 下拉列表(select)+拉下选项(option)的应用
<form action='数据处理网页' name="名称" method="数据传递方式">
	表单元素
</form>
  1. action属性:用于设定表单独数据处理程序url的地址。如:http://localhost/test.asp
  2. method属性:用来定义数据传递到服务器的方式。有四种。
    (1),get:字段小,安全性低
    (2),post:字段大,安全性高
    (3),put。
    (4),delet。

表单元素
ok,接下来我们介绍表单元素及它的应用。
表单元素有

  • input
  • 文本域textarea
  • 下拉列表select+下拉选项option

input
格式:<input type=“表单类型”> </input>

表单类型表达含义
text文本框
password密码框
submit提交框
reset重置框
radio单选框
checkbox复选框

一,input应用

1,文本框(text)和密码框(password)
在这里插入图片描述

运行结果:
在这里插入图片描述
有的同学可能就要问了,文本框和密码框有什么区别吗?其实他们是有的,看下图在这里插入图片描述
我们分别在文本框和密码框输入我们的字符或者数字,可以看到文本框显示的原字符或者数字形式,二密码框显示的则是****号,这也是为了我们的密码提供了一种保障。


2,提交框(submi)+重置框(reset)
在这里插入图片描述

运行结果:
在这里插入图片描述
在这里value提交数据到服务器的值。


3,单选(radio)+多选(checkbox)
代码在这里插入图片描述
运行结果在这里插入图片描述
从运行结果可以看到,男和音乐被勾选上了,这是因为我们在相应的代码中输入了checked=‘checked’表示默认选中的意思。

二,文本域textarea的应用

格式:

<form>
	备注:<br>
	<textarea cols='30' rows='20'>请在这里输入内容
	</textarea>
</form>

在这里插入图片描述
运行结果:
在这里插入图片描述
从运行结果看,想必知道cols和rows是表示文本域的长宽了吧。

三,下拉列表(select)+拉下选项(option)的应用

格式:

<selct>
<option value="1" >选项1</option>
<option value="2" select='select'>选项2</option>
<option value="3" >选项3</option>
</select>

应用:
在这里插入图片描述
运行结果:
在这里插入图片描述
可知selected=“selected”在这里也是默认选项。

注:外面一圈的用<fieldset><legend>输入内容</legend></fieldset>外面的fieldset是要包裹在你想包裹的内容之外,且在form的里面

示例

做一个用户注册页面。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201018215500454.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2OTI0NDE2,size_16,color_FFFFFF,t_70#pic_center)

本文链接http://element-ui.cn/article/show-220221.aspx