HTML按钮的多种使用方法(html单选按钮代码怎么写)

HTML表单用于搜集不同类型的用户输入。HTML5Input,拥有多个新的表单输入类型,提供了更好的输入控制和验证,今天将为大家带来HTML中的表单及其input输入类型。一、HTML表单1、HT

HTML 表单用于搜集不同类型的用户输入。HTML5 Input,拥有多个新的表单输入类型,提供了更好的输入控制和验证,今天将为大家带来HTML中的表单及其input输入类型。

一、HTML表单

1、HTML表单用于收集不同类型的用户输入,是一个包含表单元素的区域并且允许用户在表单中输入内容,比如文本域(textarea)、下拉列表、单选框(radio=buttons)、复选框(checkboxes)等。

2、表单使用标签来设置,示例:

HTML按钮的多种使用方法(html单选按钮代码怎么写)

运行结果:

HTML按钮的多种使用方法(html单选按钮代码怎么写)

二、HTML表单属性:

1、HTML表单包含表单元素,表单元素是指不同类型的input元素、复选框、单选按钮、提交按钮等。

2、action属性

在上面的示例中出现了action属性,action属性定义在提交表单执行的动作,向服务器提交表单的通常做法是使用提交按钮。

通常,表单会被提交到web服务器上的网页,上面的例子中,则指定了某个服务器脚本来处理被提交表单。

如果省略 action 属性,则 action 会被设置为当前页面。

3、method 属性

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

HTML按钮的多种使用方法(html单选按钮代码怎么写)

HTML按钮的多种使用方法(html单选按钮代码怎么写)

如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息,使用get。

如果表单正在更新数据,或者包含敏感信息(例如密码),使用post。

4、如果要正确地被提交,每个输入字段必须设置一个 name 属性,示例:

First name:

Last name:

如果您点击提交,表单数据会被发送到名为 demo_form.asp 的页面。

first name 不会被提交,因为此 input 元素没有 name 属性。

运行结果:

HTML按钮的多种使用方法(html单选按钮代码怎么写)

5、target 属性

target 属性规定提交表单后在何处显示响应,target 属性可设置以下值之一:

HTML按钮的多种使用方法(html单选按钮代码怎么写)

默认值为 _self,这意味着响应将在当前窗口中打开。

6、Autocomplete 属性

autocomplete 属性规定表单是否应打开自动完成功能。

启用自动完成功能后,浏览器会根据用户之前输入的值自动填写值,示例:

HTML按钮的多种使用方法(html单选按钮代码怎么写)

运行结果:

HTML按钮的多种使用方法(html单选按钮代码怎么写)

7、所有属性的列表:

HTML按钮的多种使用方法(html单选按钮代码怎么写)

三、HTML表单元素:

1、元素是最重要的表单元素,有很多的形态,根据不同的type属性,例如:

HTML按钮的多种使用方法(html单选按钮代码怎么写)

① 文本输入(text),示例:

First name:

Last name:

请注意表单本身是不可见的。

同时请注意文本字段的默认宽度是 20 个字符。

运行结果:

HTML按钮的多种使用方法(html单选按钮代码怎么写)

② 单选按钮输入(radio),示例:

Male

Female

运行结果:

HTML按钮的多种使用方法(html单选按钮代码怎么写)

HTML按钮的多种使用方法(html单选按钮代码怎么写)

③ 提交按钮(submit),示例:

First name:

Last name:

如果您点击提交,表单数据会被发送到名为 demo_form.asp 的页面。

运行结果:

HTML按钮的多种使用方法(html单选按钮代码怎么写)

2、元素

元素定义下拉列表,示例:

Volvo

Saab

Fiat

Audi

运行结果:

HTML按钮的多种使用方法(html单选按钮代码怎么写)

3、

元素

元素组合表单中的相关数据

元素为

元素定义标题,示例:

Personal information:

First name:

Last name:

运行结果:

HTML按钮的多种使用方法(html单选按钮代码怎么写)

4、

运行结果:

HTML按钮的多种使用方法(html单选按钮代码怎么写)

5、HTML5元素

元素为 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

元素的 list 属性必须引用 元素的 id 属性,示例:

运行结果:

HTML按钮的多种使用方法(html单选按钮代码怎么写)

四、HTML表单输入类型

输入类型

定义

text

定义供文本输入的单行输入字段

password

定义密码字段

submit

定义提交表单数据至表单处理程序的按钮

radio

定义单选按钮

checkbox

定义复选框

中的type:

类型

定义

radio

定义单选按钮

checkbox

定义复选框

button

定义按钮

number

用于应该包含数字值的输入字段

date

用于应该包含日期的输入字段

color

用于应该包含颜色的输入字段

range

用于应该包含一定范围内的值的输入字段

month

允许用户选择月份和年份

week

允许用户选择周和年

time

允许用户选择时间(无时区)

datetime

允许用户选择日期和时间(有时区)

datetime-local

允许用户选择日期和时间(无时区)

email

用于应该包含电子邮件地址的输入字段

search

用于搜索字段(搜索字段的表现类似常规文本字段)

tel

用于应该包含电话号码的输入字段

url

用于应该包含 URL 地址的输入字段

输入限制:

HTML按钮的多种使用方法(html单选按钮代码怎么写)

这就是有关HTML表单的大概内容了,希望这篇HTML的表单及其input输入类型的知识点能对大家有所帮助。

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至 97552693@qq.com 举报,一经查实,本站将立刻删除。本文链接:https://teaffka.com/n/22643.html

(0)
sinrry的头像sinrry
上一篇 2023年 11月 16日
下一篇 2023年 11月 16日

相关推荐

发表回复

登录后才能评论

联系我们

在线咨询: QQ交谈

邮件:97552693@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息