HTML5 表单标签

现实中的表单,类似我们去银行办理信用卡填写的单子

目的是为了收集用户信息

在我们的网页中,我们需要跟用户进行交互 收集用户资料 此时也需要填写表单

在HTML中 一个完整的表单通常有表单控件(也称为表单元素) 、提示信息和表单域3个部分构成

表单控件: 包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等

提示信息: 一个表单中通常还需要包含一些文字说明,提示用户进行填写

表单域: 相当于一个容器,用来容纳所有表单控件和提示信息,可以通过他定义处理表单数据所用程序的URL地址,以及数据提交到服务器的方法,如果不定义表单域,表单中的数据就无法传送到后台服务器

input控件(重点)

在上面的语法中,  标签为单标签,type 属性为其最基本的属性,其取值有多重,用于指定不同控件类型,除了 type 属性之外  标签还可以定义很多其他属性 其常用属性如下图所示 :

HTML5 表单标签_第1张图片

注意 : 单选框 如果是一组 我们通过相同的 name 值 来实现 :

性别: 

注意 : 复选框 可以同时选择多个

爱好: 篮球 足球

注意 : 默认选中项 只需要在属性中添加 checked=“checked” 默认选中性别女 代码如下 :

性别:

input 按钮组

搜索: 

最多字符数和文本值 maxlength = " 6 " 最多字符数为 6
value = “789” 在input框中的显示为789

示例
HTML5 表单标签_第2张图片

lable标签

label 标签为 input 元素定义标注 (标签)

作用: 用于绑定一个表单元素,当点击 label 标签的时候,被绑定的表单元素就会获得输入焦点

那么 我们如何绑定元素呢?

for 属性规定 label 与哪个表单元素绑定

1. 用label直接进行包裹input标签

2. 如果label里面有多个表单 想定位到某个地方 可以通过for id 的格式来进行

HTML5 表单标签_第3张图片

textarea控件(文本域)

如果需要输入大量的信息, 就需要用到textarea标签,通过textarea控件可以轻松的创建多行文本输入框 其基本语法格式如下 :


下拉菜单

使用 select 控件定义下拉菜单的基本语法格式如下:


注意 :

1. 中至少应包含一对
2. 在option中定义 selected="selected" 时, 当前项即为默认选中项

HTML5 表单标签_第4张图片

表单域

在 HTML 中 form标签被用于定义表单域,即创建一个表单。以实现用户信息的收集和传递 form 中的所有内容都会被提交给服务器,创建表单的基本语法格式如下 :

各种表单控件

常用属性 :

  1. Action

    在表单收集到信息后, 需要将信息传递给服务器进行处理 action 属性用于指定接收并处理表单数据的服务器程序的 url 地址

  2. method

    用于设置表单数据的提交方式 其取值为 get 或 post

  3. name

    用于指定表单的名称 以区分同一个页面中的多个表单

注意 : 每个表单都应该有自己的表单域

你可能感兴趣的:(前端,html5,css)