HTML常用表单标签

zhongmeizhi 发布于2019-08-02 16:04 / 1045人阅读

摘要：也可以通过和属性来设置文本域的尺寸，但是属性设置不太标准，最好的方法是通过设置。设置里默认大小的文本域实际页面效果属性用于设置文本域可见文本的行数。此外，属性也适用于文本域。

1.表单元素

HTML 表单用于收集用户输入。

代码示例：

常用属性解释：

action属性定义在提交表单时执行的动作通常，表单会被提交到 web 服务器上的网页。在上面的例子中，指定了某个服务器脚本来处理被提交表单.

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）

2.输入input 2.1 文本输入框

创建一个最简单的文本输入框：

代码示例：

实际效果图：

我们可以在这个文本框里面输入任意的数字、字符或符号

（1）创建一个带有提示文字的文本输入框：

代码示例：

placeholder 属性规定用以描述输入字段预期值的提示,该提示会在用户输入值之前显示在输入字段中。
placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

实际效果图：

（2）创建一个带有默认值的文本输入框：

代码示例：

value 属性规定输入字段的初始值。

实际效果图：

（3）创建一个带有默认值且不能修改的文本输入框：

代码示例：

readonly 属性规定输入字段为只读（不能修改）,readonly 属性不需要值。它等同于 readonly="readonly"。

（4）创建一个禁用的文本输入框：

实际效果图：

disabled 属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。disabled 属性不需要值。它等同于 disabled="disabled"。

（5）创建限制输入字数的文本输入框：

代码示例：

maxlength 属性规定输入字段允许的最大长度,如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。

如上代码：我们输入超过8个文字后，再输入任意的文字，文本输入框都不会接收。

2.2密码输入框

创建一个密码输入框，代码示例：

实际页面效果：

密码输入框的本质还是一个文本输入框，只不过密码输入框在用户输入字段时，会自动的将输入的文字用星号或实心圆替换，避免用户密码直接被其他人看到。

备注：适用在文本输入框上的属性同样也适用于密码输入框。

2.3单选按钮

单选输入或单选按钮，通常用与用户从多个选项中选择一个。

代码示例：

请选择您的性别：

男女

实际效果图：

注意事项：

同一组选项name属性要保持一致

选定的选项在表单数据提交时提交的格式为 nameVlaue:"selectVlaue"，如上代码表单提交时提交的值：sex:male

2.3.1创建一个默认选中的单选按钮

代码示例：

请选择您的性别：

男女

checked 属性规定按钮是否默认选中状态。checked 属性不需要值。它等同于 checked="checked"。

2.4多选按钮

多选按钮，用户可以从多个选项中选择一个或多个

I have a pen


I have an apple

实际效果图：

多选按钮也可以通过checked属性设置多选按钮为默认选中状态，多选的情况下表单提交时，多选按钮提交的值是用英文的逗号隔开的，例如如上表单在提交时， vehicle=pen&vehicle=apple

2.5.按钮 Button

html中，按钮通常分为普通按钮、提交按钮、重置按钮，其中提交和重置按钮用于表单数据的提交和清空重置，一般放在form表单里面，普通按钮可以随意。

（1）普通按钮

代码示例：

实际页面效果：

value 属性可以设置按钮上显示的文字。按钮可以可以通过disabled属性来设置是否禁用。

（2）提交按钮

表单提交按钮通常位于form表单内，点击后，会将用户输入的数据提交到指定的地址去处理

代码示例：

实际效果图：

备注：

上述代码使用的是get方式提交的输入

get方式提交数据时会在提交的目标URL地址后紧跟数据字段

value、disabled属性也适用于submit按钮

（3）重置按钮

重置（清空）按钮通常用于用户输入表单数据后一键清空。也需要放在form表单内使用

代码示例：

备注：value、disabled属性也适用于reset按钮

3.文本域

文本输入框在用于字数不多的文本输入时没有什么问题，但是当用户需要输入多行、多字数文本时，文本输入框就会显得很不友好。因此多行文本的输入，我们应该考虑使用文本域。

代码示例：

实际页面效果：

文本域可容纳无限数量的文本，但默认的文本域视觉大小比较小，可以通过文本域右下角的“小三角”拖动来调节大小。也可以通过cols和rows属性来设置文本域的尺寸，但是cols属性设置不太标准，最好的方法是通过CSS设置。

3.1设置里默认大小的文本域

实际页面效果：

rows 属性用于设置文本域可见文本的行数。

cols 属性用于设置文本域可见区域每行文字的个数，但是这个数量因为中英文差异不太标准。

此外，placeholder name maxlength disabled 属性也适用于文本域。

4.下拉列表

下拉列表和无序列表类似，都是一种组合类型的标签，通常用于省市区的选择。

代码示例：

所在城市：

实际页面效果：

4.2默认选中某一项

默认的下拉列表选中的是第一项，如果需要指定其他选项，可以通过selected属性设置.

代码示例：

所在城市：

实际页面效果：

服务器托管超融合服务器 html常用标签 html常用单标签 html基本常用标签 html5表单常用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54601.html

校招进行时（三）---html基础

摘要：它可以有与元素事件相关的客户端脚本，当事件出现时可触发与标签为下拉菜单，需要配合标签一起使用，标签为下拉菜单中的选项。通过指定标签中的或属性可设置为下拉菜单或是列表框用于定义多行文本域，和属性是必须要填写的，他们用于指定文本域的宽度和高度。这篇文章衔接上篇，主要罗列一些前端面试中可能问到的html中最基本的问题。 (格式有点乱，内容有点水，罗列了一些基本用法，大家随便看看) 常用标签...

CarlBenjamin 2019-08-01 17:13 评论0 收藏0
html标签简介（常用）

摘要：比如等行内标签可以多个标签共同占用一行的标签。标准模式，浏览器使用的标准解析渲染页面。显示结果这个文本包含下标文本。表单提交项的值。表单还可以包含和标签。html常识什么是HTML htyper text markup language 即超文本标记语言超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。标记语言: 标记（标签）构成的语言. 网页==HTML文...

Travis 2019-04-23 13:25 评论0 收藏0
常用的HTML标签详解与总结

摘要：今天，我们就来详细介绍常用的标签。标签对文字字符进行换行处理。标签加入水平分割线。标签语义强调，表示重视。标签有序列表标签。即定义描述，用于添加该名词的具体解释。标签用来显示图片。默认内容标签下拉列表，以和两个标签配合完成。对于很多HTML初学者来说，记忆和掌握标签是一门很难搞的功课。今天，我们就来详细介绍常用的HTML标签。对于标签的掌握，更多的是要通过练习，熟能生巧。 stlye...

DobbyKim 2019-08-02 16:06 评论0 收藏0
HTML常用标签的使用

摘要：但是，可以在正常的文档主体中使用。该名称可以用作标签，标签的属性值，或标签和标签的属性值。标签元素用于为基于的表单创建交互式控件，以便接受来自用户的数据。标签的元素表示表格数据即通过二维数据表表示的信息。一、常见标签详解 1、标签 HTML内联框架元素表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。在HTML 4.01中，文档可能包含头部和正文，或头部和框架集，...

nevermind 2019-08-02 10:38 评论0 收藏0