百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

HTML表单及其Input输入类型_html表单input属性

liuian 2025-09-09 04:34 3 浏览

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

一、HTML表单

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

2、表单使用标签<form>来设置，示例：

运行结果：

二、HTML表单属性：

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

2、action属性

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

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

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

3、method 属性

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

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

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

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

<!DOCTYPE html>

<html>

<body>

<form action="/demo/demo_form.asp">

First name:<br>

<input type="text" name="Firstname" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</form>

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

<p>first name 不会被提交，因为此 input 元素没有 name 属性。</p>

</body>

</html>

运行结果：

5、target 属性

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

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

6、Autocomplete 属性

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

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

运行结果：


7、所有<form>属性的列表：


三、HTML表单元素：

1、<input>元素是最重要的表单元素，有很多的形态，根据不同的type属性，例如：

①　文本输入（text），示例：

<!DOCTYPE html>

<html>

<body>

<form>

First name:<br>

<input type="text" name="firstname">

<br>

Last name:<br>

<input type="text" name="lastname">

</form>

<p>请注意表单本身是不可见的。</p>

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

</body>

</html>

运行结果：

②　单选按钮输入（radio），示例：

<!DOCTYPE html>

<html>

<body>

<form>

<input type="radio" name="sex" value="male" checked>Male

<br>

<input type="radio" name="sex" value="female">Female

</form>

</body>

</html>

运行结果：

③　提交按钮（submit），示例：

<!DOCTYPE html>

<html>

<body>

<form action="/demo/demo_form.asp">

First name:<br>

<input type="text" name="firstname" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</form>

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

</body>

</html>

运行结果：

2、<select>元素

<select>元素定义下拉列表，示例：

<!DOCTYPE html>

<html>

<body>

<form action="/demo/demo_form.asp">

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

<br><br>

<input type="submit">

</form>

</body>

</html>

运行结果：

3、<fieldset>元素

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

<legend>元素为<fieldset>元素定义标题，示例：

<!DOCTYPE html>

<html>

<body>

<form action="/demo/demo_form.asp">

<fieldset>

<legend>Personal information:</legend>

First name:<br>

<input type="text" name="firstname" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</fieldset>

</form>

</body>

</html>

运行结果：

4、<textarea> 元素

<textarea> 元素定义多行输入字段（文本域）、示例：

<!DOCTYPE html>

<html>

<body>

<form>

<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.

</textarea>

</form>

</body>

</html>

运行结果：

5、HTML5<datalist>元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

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

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性，示例：

<!DOCTYPE html>

<html>

<body>

<form action="/demo/demo_form.asp">

<input list="browsers" name="browser">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

<input type="submit">

</form>

</body>

</html>

运行结果：

四、HTML表单输入类型

输入类型

定义

text

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

password

定义密码字段

submit

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

radio

定义单选按钮

checkbox

定义复选框

<input>中的type：

类型

定义

radio

定义单选按钮

checkbox

定义复选框

button

定义按钮

number

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

date

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

color

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

range

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

month

允许用户选择月份和年份

week

允许用户选择周和年

time

允许用户选择时间（无时区）

datetime

允许用户选择日期和时间（有时区）

datetime-local

允许用户选择日期和时间（无时区）

email

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

search

用于搜索字段（搜索字段的表现类似常规文本字段）

tel

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

url

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


输入限制：

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

相关推荐

Html中Css样式Ⅱ_html+css+

元素的定位（方式五种定位方式）:静态定位:position:static;相对定位:position:relative;绝对定位:position:absolute;固定定位:position...

HTML 标签和属性值的基本格式_html标签及属性的语法规则

HTML:HyperTextMarkupLanguage超文本标记语言HTML代码不区分大小写,包括HTML标记、属性、属性值都不区分大小写;任何空格或回车键在代码中都无效，插入空格或回车有...

基于Visual Studio C#语言开发上位机，做定制设计后有多好看

...

C#中使用Halcon开发视觉检测程序教程

一、环境准备1.安装Halcon从Halcon官方网站下载适合你操作系统的安装包，按照安装向导完成安装。安装过程中，记住安装路径，后续配置环境时会用到。2.配置VisualStudio项目打开V...

【开源】C#功能强大，灵活的跨平台开发框架 - Uno Platform

前言今天给广大网友分享一个基于C#开源、功能强大、灵活的跨平台开发框架，她就是：UnoPlatform。通过UnoPlatform，开发者可以利用单一代码库实现多平台兼容，极大地提高了开发效率和...

C# 的发展简史_c#的发展前景

1.C#的诞生和初期（2000-2005）2000年：在微软的PDC大会上，由AndersHejlsberg首次公开展示了C#语言。2002年：微软发布了.NETFramework1.0，其...

Visual Studio 2010-C#跟西门子1200(Sharp7)窗体控制②-启动按钮

VisualStudio2010--C#跟西门子1200(Sharp7)窗体控制②--启动按钮上期回顾（上期主要是新建窗体应用程序，添加sharp7的类库并引用，建立一个button按钮）：本期将...

Visual Studio窗口布局混乱后的恢复与优化指南

在使用VisualStudio进行开发时，我们常因误操作（如拖拽窗口、关闭面板、多显示器切换）导致界面布局混乱，代码编辑器、解决方案资源管理器、属性面板等组件“错位”，严重影响开发效率。本文将针对布...

使用Visual Studio 2017为AutoCAD创建一个c#模板

本教程的目标是展示如何在VisualStudio2017中创建AutoCAD的c#项目模板，该模板允许在调试模式下从VisualStudio加载DLL来自动启动AutoCAD。本文展示的示例使用...

IT科技-续3Visual Studio2019-C#实战练习

上次完成了登录页面的窗体设计，本次完成管理界面的设计。第一步ComBox控制深度操作点击编辑选项，加入预定选项，完成操作。第二步复制Buttons控件依次为保存、删除、重置、编辑按钮属性设置，参考...

如何在 C# 中将文本转换为 Word 以及将 Word 转换为文本

在现代软件开发中，处理文档内容是一个非常常见的需求。无论是生成报告、存储日志，还是处理用户输入，开发者都可能需要在纯文本与Word文档之间进行转换。有时需要将文本转换为Word，以便生成结构化的...

简短的C#入门教程 # C# 入门教程 C#(读作...

简短的C#入门教程#C#入门教程C#（读作CSharp）是一种由Microsoft开发的多范式编程语言，它具有广泛的应用，特别是在Windows平台上。本教程将介绍C#的基础知识，以帮助您入门这...

JavaScript中this指向各种场景_前端中this的指向

在JavaScript中，this的指向是一个核心概念，其值取决于函数的调用方式，而非定义位置（箭头函数除外）。以下是this指向的常见场景及具体说明：1.全局作用域中的this在全局作用域（非...

微信WeUI设计规范文件下载及使用方法

来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信Web开发量身设计，可以令用户的使用感知...

JavaScript技术:如何动态添加事件?

随着前端技术的不断发展，JavaScript已经成为了不可或缺的一部分，它可以让网页变得更加流畅和美观。但是，在JavaScript中动态添加事件还是一个比较困难的问题，为此，本文将从入门到精通，介绍...

一周热门
最近发表
标签列表