html5表单域,html5表单控件和表单域

一、表单控件

文章目录

一、表单控件

1.1 认识表单

1.2 input控件

1.2.1 文本框与密码框

1.2.2 单选框和复选框

1.2.3 默认选中表单属性

1.2.4 input按钮组

1.2.5 最对字符数和文本值

1.2.6 label标签

1.2.7 textarea控件(文本域)

1.2.8 下拉菜单

二、表单域

1.1 认识表单

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

提示信息：一个表单中通常包含一些说明性文字，提示用户进行填写和操作

表单域：相当于一个容器，用来容纳所有的表单空间和提示信息，可以通过它定义处理表单数据所有的程序的url地址，

以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传输到后台服务器

1.2 input控件

是一个单标签，type属性为其最基本的属性，其取值有很多种，用于指定不同的控件类型。除了type属性之外，标签还有其他很多种属性，常用的属性如下表所示：

属性

属性值

描述

type

text

单行文本输入框

type

password

密码输入框

type

radio

单选框

type

checkbox

复选框

type

button

普通按钮

type

submit

提交按钮

type

reset

重置按钮

type

image

图片形式的提交按钮

type

file

文件域

name

用户自定义名字

控件的名称

value

用户自定义

input控件中默认的文本值

size

正整数

input控件在页面中显示的宽度

checked

checked

定义选择控件时默认选中的项

maxlength

正整数

控件允许输入的最多字符的个数

1.2.1 文本框与密码框

用户名： p>

密 码：p>

1.2.2 单选框和复选框

性 别：女

男

p>

爱好：

篮球

足球

排球

p>

1.2.3 默认选中表单属性

checked="checked" 默认选中属性

女

1.2.4 input按钮组

上传头像：

1.2.5 最对字符数和文本值

密码：p>

1.2.6 label标签

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

如何绑定元素：for属性规定label标签与那个表单元素绑定

1、

输入账号：label>

2、

输入账号：label>

1.2.7 textarea控件(文本域)

需要输入大量的信息，就需要使用到控件，通过该控件可以轻松的创建多行文本输入框，使用方式如下：

输入的文本内容textarea>

1.2.8 下拉菜单

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

四川

重庆

贵州

上海

注意事项:

1、标签至少包含一对

2、在option中定义 selected=“selected” 时，当前项即为默认选中项

二、表单域

作用：收集表单信息，并且提交给服务器；表单域是看不见的

用户名：p>

密码：p>

p>

p>

form>

常用属性：

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

method 用于设置表单提交数据的方式，取值为get或者是post。get提交会明文显示在地址栏，建议用post方式提交

name 用于指定表单的名称，以区分同一个页面的不同表单