03 HTML语法----表单

表单的基本介绍

表单是一种结构,用来在互联网上收集用户信息,在HTML当中事先定义好一个标签来完成这件事,标签名叫做form,它是一个双标签。

内容

action和method是form的两个是属性

  • action 属性值写的是将当前表单中的数据提交到哪里,在程序编写阶段一般用#代替或者空着不写。
  • method 属性值就是用来定义当前表单中的数据以何种形式提交到网站后台,最常见的方式是get和post(get就表示将当前数据通过URL地址进行传输)

默认情况下 ,form只是声明当前结构只是一个表单,但是它里面不存在任何的供用户去输入的方框。看起来就是一张白纸,这个时候如果想要通过表单来收集用户信息,就必须在这张白纸上准备好一些可以供用户输入的框。此时在HTML中也定义了一些给用户输入的框,我们将这些框称之为表单元素。

03 HTML语法----表单_第1张图片

03 HTML语法----表单_第2张图片

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

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

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

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

常见的表单元素

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

  • 文本输入框:
  • 密码输入框:
  • 提交按钮:
  • 单选框:

03 HTML语法----表单_第3张图片

如果不设置相同的name属性,就会出现两个都能选择

03 HTML语法----表单_第4张图片

 

  • 复选框:

03 HTML语法----表单_第5张图片

    适用于单选框也适用于复选框(属性名与属性值相同,也可以直接简写成属性名)

03 HTML语法----表单_第6张图片

  • 文本框:

03 HTML语法----表单_第7张图片

 

  • 下拉框:双标签

03 HTML语法----表单_第8张图片

  • 重置按钮
  • 普通按钮

03 HTML语法----表单_第9张图片

 

 

 

 

你可能感兴趣的:(测试)