HTML FORM表单,input标签的说明

合集下载

form标签的用法

form标签的用法form标签用于创建一个HTML表单，用于收集用户的输入数据。

它通过input、textarea、select等元素来创建输入字段，以及通过submit按钮来提交表单数据。

<form>元素的用法如下：1. 基本结构：```html<form></form>```2. 提交表单：```html<form action="submit.php" method="post"><input type="submit" value="提交"></form>```- `action`属性指定了表单数据提交的URL地址。

- `method`属性指定了表单数据的提交方式，可以是"get"或"post"。

3. 输入字段：- 使用`<input>`元素来创建不同类型的输入字段，如文本输入框、密码输入框、单选按钮、复选框等。

- 使用`<textarea>`元素来创建多行文本输入框。

- 使用`<select>`和`<option>`元素来创建下拉列表框。

4. 表单标签属性：- `action`：指定表单提交的URL地址。

- `method`：指定表单提交的方式。

- `target`：指定表单数据提交后的处理方式，如在新窗口打开、在同一窗口打开等。

- `enctype`：指定表单数据的编码方式，常用的有`application/x-www-form-urlencoded`和`multipart/form-data`。

例子：```html<form action="submit.php" method="post"><input type="text" name="username" placeholder="请输入用户名"><input type="password" name="password" placeholder="请输入密码"><input type="submit" value="登录"></form>```这个例子创建了一个登录表单，包含用户名和密码的输入字段，提交按钮用于将表单数据发送给服务器进行验证。

HTML5表单元素介绍

2、<form>标签常用属性详解在表单的<form>标记中还可以设置表单的基本属性，包括表单的名称、处理程序、传送方法等。

一般情况下，表单的处理程序action和传送方法method是必不可少的参数。

action属性定义一个URL。

当点击提交按钮时，向这个URL 发送数据。

真正处理表单的数据脚本或程序是在action属性里，这个属性值可以是程序或脚本的一个完整的URL。

说明：在该语法中，表单的处理程序定义的是表单要提交的地址，也就是表单中收集到的资料将要传递的程序地址。

这一地址可以是绝对地址，也可以是相对地址，还可以是一些其他的地址形式，例如发送E-mail等。

<form action="mailto:1347014722@"> </form>method属性用于向action URL 发送数据的HTTP 方法。

method=get：使用这个设置时，来访者输入的数据会附加在URL之后，由用户端直接发送至服务器，所以速度上会比post快，但缺点是数据长度不能够太长。

在没有指定method的情形下一般都会视get为默认值。

method=post：使用这种设置时，表单数据是与URL分开发送的，用户端的计算机会通知服务器来读取数据，所以通常没有数据长度上的限制，缺点是速度上也会比POST慢。

enctype属性对表单内容进行编码的MIME 类型。

Text/plain 以纯文本的形式传送application /x-www-form-urlencoded 默认的编码形式multipart/form-data MIME编码，上传文件的表单必须选择该项target属性目标显示方式。

target属性用来指定目标窗口的打开方式。

_blank是指将返回的信息显示在新打开的窗口中；_parent是指将返回信息显示在父级的浏览器窗口中；_self则表示将返回信息显示在当前浏览器窗口；_top表示将返回信息显示在顶级浏览器窗口中。

2022年form表单中input控件最详细总结

2022年form表单中input控件最详细总结语法<input type="" name="" id="" value="" placeholder=""/>属性type：判断输⼊信息的类别，此属性值必须写，不写默认是text⽂本信息（text、password、radio、checkbox...）name：标明该input名称，可⽤于设置radio单选操作size：输⼊框的长度⼤⼩maxlength：输⼊框中允许输⼊字符的最⼤数readonly ：表⽰该框中只能显⽰，不能添加修改autocomplete ：是否保存⽤户输⼊值，值为on(默认)或offautofocus ：获取⽂本框焦点required ：设置⽂本框为必填内容pattern ：设置正则校验value：给input输⼊框设置默认值placeholder：⽂本提⽰信息，⽤来标注该input是⼲啥的type属性1.⽂本域（type="text"）<form action="" method="" target=""><input type="text"/></form>注意:表单本⾝并不可见。

同时，在⼤多数浏览器中，⽂本域的默认宽度是 20 个字符。

2.密码字段（type="password"）<form action="" method="" target=""><input type="password"/></form>注意:密码字段字符不会明⽂显⽰，⽽是以星号或圆点替代。

form表单的使用

form表单的使用表单（Form）在网页中是用来收集用户输入的重要元素。

通过表单，用户可以输入文本、选择选项、上传文件等。

以下是如何在HTML中创建和使用表单的基本知识：1. 创建表单：使用`<form>`标签来创建一个表单。

例如：```html<form action="/submit_form" method="post">```这里，`action`属性定义了当表单提交时，数据发送到的URL，而`method`属性定义了数据发送的方式（如`get`或`post`）。

2. 输入字段：使用各种输入标签来创建不同类型的输入字段。

例如：`<input type="text">` 创建一个文本输入字段。

`<input type="password">` 创建一个密码输入字段。

`<textarea></textarea>` 创建一个多行文本输入字段。

`<select></select>` 创建一个下拉选择列表。

`<option value="value">Text</option>` 在下拉列表中添加选项。

例如：```html<form action="/submit_form" method="post">姓名：<input type="text" name="name"><br>邮箱：<input type="email" name="email"><br><textarea name="message"></textarea><br><input type="submit" value="提交"></form>```3. 复选框和单选按钮：使用`<input type="checkbox">`创建复选框，使用`<inputtype="radio">`创建单选按钮。

html中input的用法

html中input的用法一、简介在HTML中，<input>是一个非常重要的元素，用于创建用户界面的输入控件。

通过使用<input>元素，我们可以添加文本框、按钮、单选框、复选框等各种表单元素。

二、文本框输入1. <input type="text">最基础的输入控件就是文本框了。

通过设置type属性为"text"，我们可以创建一个可供用户输入文本的文本框。

2. 设置最大长度有时候我们希望限制用户输入的字符数量。

通过设置maxlength属性，可以指定允许的最大字符数。

3. 占位符在文本框中显示默认提示信息是一种良好的用户体验。

通过placeholder属性，我们可以在文本框中显示一个占位符，默认提示用户应该输入什么内容。

4. 隐藏密码对于需要输入敏感信息（如密码）的场景，我们可以使用"type"属性设置为"password"来隐藏实际输入内容。

此时在页面上只会显示圆点代替真实字符。

5. 自动完成自动完成功能是指根据用户之前输入过的值或其他因素，在用户开始键入时提供建议或自动填写内容。

我们可以通过autocomplete属性来开启或关闭自动完成功能。

三、单选框和复选框1. 单选框（radio）单选按钮用于从多个选项中选择一项。

通过设置type属性为"radio"，并使用相同的name属性，我们可以将多个单选按钮分组在一起。

2. 复选框（checkbox）复选框用于从多个选项中选择多个或全部选项。

通过设置type属性为"checkbox"，每个复选框都有一个独立的name属性。

四、提交按钮和重置按钮1. 提交按钮（submit）提交按钮用于提交用户填写的表单数据给服务器进行处理。

当用户点击该按钮时，默认会触发form元素中的submit事件。

html基础-form表单、input输入框、select选择框与文本框（二）

html基础-form表单、input输⼊框、select选择框与⽂本框（⼆）HTML标签：表单标签概念：⽤于采集⽤户输⼊的数据的。

⽤于和服务器进⾏交互表单标签 form：⽤于定义表单的。

可以定义⼀个范围，范围代表采集⽤户数据的范围form表单属性：1）action：指定提交数据的URL2）method:指定提交⽅式,分类：⼀共7种，2种⽐较常⽤get：1.请求参数会在地址栏中显⽰。

会封装到请求⾏中(HTTP协议后讲解)。

2.请求参数⼤⼩是有限制的。

3.不太安全。

post：1.请求参数不会再地址栏中显⽰。

会封装在请求体中(HTTP协议后讲解)2.请求参数的⼤⼩没有限制。

3.较为安全。

3）表单项中的数据要想被提交：必须指定其name属性例⼦：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表单标签</title></head><body><form action="/login" method="post">⽤户名：<input name="username"><br>密码：<input name="password"><br><input type="submit" value="登录" ></form></body></html>结果：input标签：可以通过type属性值，改变元素展⽰的样式label：指定输⼊项的⽂字描述信息， label的for属性⼀般会和 input 的 id属性值对应。

简述使用html创建表单的基本步骤

简述使用html创建表单的基本步骤创建表单是一种常见的网页设计需求,表单可以让用户输入数据或提交表单数据。

下面是创建HTML表单的基本步骤:步骤1:HTML标签在HTML中,表单需要使用<form>标签来创建。

该标签包含多个子标签,如<label>标签用于显示表单输入字段的名称</label>,<input>标签用于定义表单输入字段,<button>标签用于创建提交按钮。

例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><button type="submit">提交</button></form>```步骤2:标签属性表单中的每个输入字段和提交按钮都需要指定属性,以便在服务器端正确地处理它们。

这些属性包括:- `<input>`标签的属性:type(输入类型),id(标识符),name(用于在服务器端查找属性值的名称),required(是否是必须的),value(输入值),pattern(正则表达式)。

- `<button>`标签的属性:type(提交类型),name(用于在服务器端查找属性值的名称),value(提交值),background(背景颜色),color(颜色),hover(hover 状态),优惠政策(是否在浏览器缓存中保留按钮)。

例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><button type="submit" name="submit" value="提交">提交</button> </form>```步骤3:表单数据表单数据通常通过<input>标签中的type属性指定,例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><input type="password" id="password" name="password" required> <input type="submit" value="提交"></form>```步骤4:提交表单数据当用户完成表单并单击提交按钮时,浏览器将向服务器发送表单数据。

html input 标签的用法

html input 标签的用法HTML（HyperText Markup Language）是一种用于创建网页结构的标记语言，而 input 标签则是 HTML 中最常用的表单元素之一。

在这篇文章中，我们将探讨 HTML input 标签的用法，以及它的不同属性和类型。

1. 基本用法在 HTML 中，input 标签用于创建表单输入字段，它允许用户在网页中输入文本、选择选项或上传文件。

下面是 input 标签的基本用法：```html<input type="text" name="username" placeholder="请输入用户名"> ```在上面的例子中，type 属性被设置为 "text"，这表示创建了一个文本输入框。

name 属性用于标识输入字段，并在提交表单时将其值与用户输入的内容一起发送到服务器。

placeholder 属性用于在输入框中显示灰色的提示文本，告诉用户应该输入什么内容。

2. 输入类型input 标签有多种不同的输入类型，每种类型都有其特定的用途和限制。

下面是一些常见的输入类型：- Text（文本）：用于输入单行文本。

- Password（密码）：用于输入密码，在用户输入时显示为隐藏字符。

- Number（数字）：用于输入数字。

- Email（电子邮件）：用于输入电子邮件地址，并在提交表单时进行验证。

- Checkbox（复选框）：用于选择多个选项。

- Radio（单选按钮）：用于选择一个选项。

- File（文件）：用于上传文件。

以下是一些示例：```html<input type="password" name="password" placeholder="请输入密码"> <input type="number" name="age" min="18" max="99"><input type="email" name="email" required><input type="checkbox" name="interests" value="sports">体育<input type="radio" name="gender" value="male">男<input type="file" name="avatar">```3. 必填属性有时候，我们希望用户必须填写某些表单字段，以确保数据的完整性和准确性。

html input用法

HTML `<input>` 标签是用于创建HTML 表单的一个基础元素。

它可以用于收集用户输入的各种数据，如文本、复选框、单选按钮、提交按钮等。

以下是一些`<input>` 标签的基本用法：1. 文本输入框：<form><label for="fname">First name:</label><br><input type="text" id="fname" name="fname"><br></form>2. 密码输入框：<form><label for="pwd">Password:</label><br><input type="password" id="pwd" name="pwd"></form>3. 单选按钮：<form><input type="radio" id="male" name="gender" value="male"><label for="male">Male</label><br><input type="radio" id="female" name="gender" value="female"><label for="female">Female</label><br></form>4. 复选框：<form><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"><label for="vehicle1"> I have a bike</label><br><input type="checkbox" id="vehicle2" name="vehicle2" value="Car"><label for="vehicle2"> I have a car</label><br></form>5. 提交按钮：<form action="/action_page.php"><input type="submit" value="Submit"></form>以上就是`<input>` 标签的一些基本用法。

html表单模板代码

html表单模板代码HTML表单是一种用于收集用户输入信息的交互性组件，一般来说表单都由多个表单元素组成，这些表单元素包括文本框，单选框，多选框，下拉框等。

HTML表单模板代码旨在为广大开发者提供模板化的HTML表单代码，方便开发者使用表单进行数据收集。

HTML表单模板代码的基本格式如下：<form action="submit-url" method="post"><label for="input-1">文本框：</label><input type="text" id="input-1" name="input-name"><label>单选框：</label><br><input type="radio" id="radio-1" name="radio-name" value="1"> <label for="radio-1">选项1</label><br><input type="radio" id="radio-2" name="radio-name" value="2"> <label for="radio-2">选项2</label><br><label>多选框：</label><br><input type="checkbox" id="check-1" name="check-name" value="1"><label for="check-1">选项1</label><br><input type="checkbox" id="check-2" name="check-name" value="2"><label for="check-2">选项2</label><br><label>下拉框：</label><br><select id="select-1" name="select-name"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select><br><label for="submit-btn"></label><input type="submit" id="submit-btn" value="提交"></form>上述代码包括了文本框，单选框，多选框和下拉框等常用表单元素的演示。

表单form的基本组成

表单form的基本组成表单（form）是网页中常用的一种交互元素，用于收集用户输入的数据。

一个基本的表单由几个主要组成部分构成：表单域（form field）、标签（label）、输入框（input）、选项框（checkbox/radio）、下拉框（select）、提交按钮（submit button）和重置按钮（reset button）。

下面将分别介绍这些组成部分。

一、表单域（form field）表单域用于包裹表单中的所有元素，它定义了用户输入的数据将被发送到服务器的哪个目标。

在HTML中，表单域使用<form>标签表示，通常包含一个或多个输入元素，以及一个提交按钮。

二、标签（label）标签用于描述输入框、选项框或下拉框等表单元素的用途。

标签通常与输入元素关联，可以通过指定标签的for属性与相应的输入元素的id属性建立关联。

标签的作用是提高表单的可用性和可访问性，让用户更容易理解每个输入项的用途。

三、输入框（input）输入框是表单中最基本的元素之一，用于接收用户输入的文本或数值。

常见的输入框类型有文本框（text）、密码框（password）、邮箱输入框（email）、电话号码输入框（tel）等。

输入框可以通过设置属性来限制输入的格式，例如设置maxlength属性限制输入的最大字符数。

四、选项框（checkbox/radio）选项框用于提供多个选项供用户选择，包括复选框（checkbox）和单选框（radio）。

复选框允许用户选择多个选项，而单选框只能选择其中的一个。

选项框一般通过设置name属性和value属性来标识选项，通过checked属性来表示是否选中。

五、下拉框（select）下拉框用于提供一个下拉菜单供用户选择。

下拉框使用<select>标签表示，每个选项使用<option>标签表示。

通过设置selected属性可以指定默认选中的选项。

网页设计input的用法

网页设计input的用法一、input标签的基本介绍和用法在网页设计中，为了与用户进行交互并获取用户输入的信息，可以使用input 标签。

input标签是HTML语言中最常用、最基础的表单元素之一。

它可以创建多种类型的输入字段，根据不同的type属性值的设定，可以实现输入文本、数字、日期等各种形式的数据。

1.1 文本输入框最常见且普遍被使用的是文本输入框。

使用<input>元素时，默认展示一个单行文本框，并允许用户通过键盘输入文本信息。

例如，在登录页面中，我们通常会看到需要填写用户名和密码的文本输入框。

1.2 数字输入框除了文本输入框外，<input>元素还支持number类型。

该类型只允许用户输入数字，并且可以通过min和max属性来限制允许输入的数值范围。

1.3 日期选择器另一个常见的应用是日期选择器。

HTML5提供了date类型来支持直接选择日期。

在支持该功能的浏览器中，弹出日历供用户选择所需日期。

二、input标签属性及相关应用技巧在使用<input>元素时，除了type属性以外还有其他一些非常有用和重要的属性可以使得表单更加灵活且适应各种不同场景的要求。

2.1 required属性required属性用于标识某个输入字段是否为必填项，如果用户没有填写相关内容就提交表单，则会触发浏览器的默认提示信息。

此属性可以让开发者避免一些重要信息的遗漏，并提高数据的完整性和准确性。

2.2 placeholder属性placeholder属性用于在输入框未获得焦点时展示一段默认的提示文本。

这样可以帮助用户更好地理解需要输入的内容，并提供良好的用户体验。

2.3 pattern属性pattern属性可以使用正则表达式来对用户的输入进行限制和验证。

通过设定合适的正则表达式，我们可以检查并筛选出符合特定格式要求（如邮箱、手机号等）的输入值。

2.4 autocomplete属性autocomplete属性设置后，浏览器会自动保存已经填写过的数据，并在下次填写相同字段时自动显示历史记录。

htmlinput标签类型属性type（file、text、radio、hidden等）详细介绍

htmlinput标签类型属性type（file、text、radio、hidden等）详细介绍html <input>标签类型属性type(file、text、radio、hidden等)详细介绍转载请注明：⽂章转载⾃:[]html <input>标签类型属性type(file、text、radio、hidden等)简介html <input>标签搜集⽤户信息,是 html Form表单中的⼀种输⼊对象。

根据不同的 type 属性值，输⼊字段拥有很多种形式。

输⼊字段可以是⽂本字段、复选框、掩码后的⽂本控件、单选按钮、按钮等等。

html <input>标签类型属性type定义和⽤法type 属性规定要显⽰的 <input> 元素的类型。

默认类型是：text。

该属性不是必需的，但是我们认为您应该始终使⽤它。

html <input>标签类型属性type详解html input标签type属性值(包括html 5新增的type值)123 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24值描述button 定义可点击的按钮（⼤多与 JavaScript 使⽤来启动脚本）checkbox 定义复选框。

color 定义拾⾊器。

date 定义⽇期字段（带有 calendar 控件）datetime 定义⽇期字段（带有 calendar 和 time 控件）datetime-local 定义⽇期字段（带有 calendar 和 time 控件）month 定义⽇期字段的⽉（带有 calendar 控件）week 定义⽇期字段的周（带有 calendar 控件）time 定义⽇期字段的时、分、秒（带有 time 控件）email 定义⽤于 e-mail 地址的⽂本字段file 定义输⼊字段和 "浏览..." 按钮，供⽂件上传hidden 定义隐藏输⼊字段image 定义图像作为提交按钮number 定义带有 spinner 控件的数字字段password 定义密码字段。

HTML——input标签

HTML——input标签很多表单元素都是由⼀个个的 input 元素组成的。

它是⾃闭合标签，根据其 type 属性值的不同分为很多种，例如单⾏⽂本框、密码框、单选按钮、复选框、隐藏域、⽂件上传域、普通按钮、提交按钮以及重置按钮等。

—— input标签的基本格式为：<input type="表单类型" />type 常⽤属性值常⽤属性值说明text表⽰单⾏⽂本框password表⽰密码框hidden表⽰隐藏域radio表⽰单选按钮checkbox表⽰复选框file表⽰⽂件上传域button表⽰普通按钮submit表⽰带提交功能的按钮reset表⽰带重置功能的按钮—— input的具体⽤法：<body><form action="/login.php" method="post" name="myForm">⽤户名:<input type="text" name="name"><br/>密码:<input type="password" name="password"><br/>性别:<input type="radio" name="sex" value="boy">男<input type="radio" name="sex" value="girl">⼥<br/>爱好:读书<input type="checkbox" name="read" value="read">跑步<input type="checkbox" name="run" value="run">逛街<input type="checkbox" name="shopping" value="shopping">看电影<input type="checkbox" name="movie" value="movie"><br/>隐藏域<input type="hidden" name="hidden"><br/>⽂件上传域<input type="file" name="file" src="url"><br/><input type="submit" value="提交"><input type="button" value="确定"><input type="reset" value="重置"></form></body>效果：—— type的属性值说明：text 表⽰常规⽂本框，⼀般⽤来输⼊⼀些对⽤户可见的⽂字。

html中input的用法

html中input的用法html中input标签可以说是最重要的html标签之一，在日常编写html代码中，input标签是最常用最重要的，它用于向用户收集信息，例如文本框、按钮、单选框等。

本文将介绍input标签的用法，帮助开发者更好的使用input标签。

首先来看一下input标签的基本用法，它的基本语法如下：* <input>input标签不同于其他标签，它可以使用type属性来指定它的类型，比如“text”、“password”、“submit”等，这些类型会影响input标签的表现形式，我们将在下面更详细的介绍。

1. 使用input标签创建文本框input标签的type属性设置为“text”，即可创建文本框，例如： * <input type=text此时，文本框会显示在网页中，用户可以在文本框内输入内容，使用value属性可以指定默认的文本框内容，例如：* <input type=text value=请输入内容同时，input标签也支持name属性，当用户在文本框输入内容时，name属性内指定的值作为表单提交数据中的键。

2. 使用input标签创建按钮input标签的type属性设置为“button”，可以创建按钮，它支持value属性和onclick事件，例如：* <input type=button value=点击按钮 onclick=alert(按钮被点击了此时，点击按钮可以执行alert()函数，弹出文本提示框。

3. 使用input标签创建单选框type属性设置为“radio”，可以创建单选框，它支持name属性和value属性，例如：* <input type=radio name=sex value=男男* <input type=radio name=sex value=女女这里，name属性指定单选框的组名，value属性指定单选框选中时表单提交数据中的值。

input标签的用法

input标签的用法
<input> 标签用于在 HTML 表单中创建输入字段，以便用户能够输入数据。

它是表单元素之一，常用于接收用户的文本、数字或文件等输入。

常见的 input 类型属性包括：text（文本输入框）、password （密码输入框）、checkbox（复选框）、radio（单选框）、submit（提交按钮）、reset（重置按钮）、file（文件上传）、number（数字输入框）等。

例如，创建一个文本输入框的示例：
<input type="text" name="username">
该示例创建了一个文本输入框，name 属性用于指定输入字段的名称，以便在提交表单时可以通过名称来访问输入的值。

除了常用的属性外，还可以根据需要使用其他属性来配置输入字段，例如：maxlength（限制输入的最大字符数）、required （设定输入字段为必填项）、pattern（使用正则表达式验证输入的格式）等。

<input> 标签可以与其他标签结合使用，例如与 <label> 标签配合使用可以提供更好的表单可访问性。

使用与 <input> 相关的属性，可以进一步配置输入字段的外观与行为，例如通过CSS 样式来修改输入框的样式。

总之，<input> 标签是 HTML 中用于创建输入字段的基本元素，不同的 type 属性可以用于创建不同类型的输入字段，而其他
相关属性可以用于配置输入字段的行为和样式。

HTML table、form表单标签的介绍

2.3 示例
<form enctype="multipart/formdata" action="ashx/login.ashx" method="post"> <table> <tr> <td><label for="txtname">账号：</label></td> <td><input type="text" id="txtname" name="login_username" /></td> </tr> <tr> <td><label for="txtpswd">密码：</label></td> <td><input type="password" id="txtpswd" name="login_pswd" /></td>
</tr> <tr>
<td colspan=2> <input type="reset" /> <input type="submit" />
</td> </tr> </table> </form>
2.4 应用场景
表单主要用于向服务器传输数据；如常见的登录、注册页面。
3. form 表单提交方式
3.rm> 标签

form表单详解

form表单详解form表单form是⼀个复杂的系统标签，其内部⼜可包含很多的⼀些输⼊标签例如input 输⼊⽂本标签 checkbox 多选标签等等form表单有⼏个属性我们需要注意⼀下 1：action属性，⾥⾯写的是url链接，接就是表单提交的地址 2：method属性，⾥⾯写的是数据提交的⽅式，可以写⼊get或者post 3：enctype属性，提交数据的编码格式form表单中的标签的前后台交互form表单被我们应⽤在前后台交互的环节的，⾥⾯的值可以在后台通过某些key取出来下⾯就来讲解不同标签取值的⽅法1. input 标签input标签我们最为常见，⾥⾯有三个属性⽐较重要 a. type 他是代表input的类型 b. name 他就是后台取值的依据(key) c. val 他是我们输⼊的值，也是后台需要的值 <input type="" name="">然后我们根据type的类型，⼜可以把input进⾏细分 a. text 表⽰普通的⽂本，明⽂输⼊ b. password 输⼊的也是⽂本，密⽂输⼊ c. number 输⼊的是数字，不是数字不让输⼊ d. submit 提交按钮，提交form表单的内容 e. button 普通的按钮 f. radio 单选框，我们需要注意的是单选框的所有的name值必须相同如果name不相同，就说明不在同⼀个选择⽅位，也就不存在单选，然后想要在后台取到他的值，你必须在定义的时候给附上⼀个值给value，这样才能取到值 g. checkbox 复选框，内容和单选框⼀样 h. file 选择⽂件，可以选择⽂件提交给后台以上基本是input的所有类型，需要注意⼏个点 1.取值都是通过name进⾏取值，所以必须给name赋值 2.⽂本类型想要附上初始值，直接在value中加⼊值就可以 3.选择框如果想要默认选中谁，那就在谁的标签中加⼊checked属性2. select 标签select标签是⼀个下拉框的形式让⽤户进⾏选择选项所以select标签中必须包含option标签才能显⽰属性形式为：<select><option></option><option></option></select>然后select中有全局属性name，这个name是后台⼜来进⾏取值的每个option标签的⽂本内容是显⽰给⽤户看的，我们需要取的是option标签中的value属性，所以在开始必须给option的value赋值后台通过select的name取值，直接取到的就是对应option的value如果我们向让他默认选择某个option，可以在option标签中加⼊selected属性，如果都不加，默认是显⽰第⼀个3. button 按钮标签新出的标签，与input中type为button的按钮⼀样4. textarea ⽂本框标签与input中的text⼀样都是输⼊⽂本的，但是textarea标签没有字数的限制，并且输⼊框可以拖拉。

input标签配合表格使用

input标签配合表格使用<input> 标签可以配合表格使用来创建表单元素，例如文本框、复选框、单选按钮等。

下面是一个简单的例子，演示了如何在表格中使用 <input> 标签来创建文本框和提交按钮：```html<!DOCTYPE html><html><head><title>表格和输入标签示例</title></head><body><h2>用户信息</h2><form><table><tr><td>用户名：</td><td><input type="text" name="username"></td></tr><tr><td>密码：</td><td><input type="password" name="password"></td> </tr><tr><td colspan="2"><input type="submit" value="提交"></td></tr></table></form></body></html>```在这个例子中，我们创建了一个简单的表单，其中包含一个用户名文本框、一个密码文本框和一个提交按钮。

这些表单元素都是使用<input> 标签在表格中创建的。

当用户填写表单并点击提交按钮时，表单数据将被发送到服务器进行处理。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

HTML 表单(Form)是 HTML 的一个重要部分，主要用于采集和提交用户输入的信息。

一个简单的 HTML 表单，包含两个文本输入框和一个提交按钮：<form action="form_action.asp" method="get"> First name: Last name:<input type="text" name="fname" /><input type="text" name="lname" /><input type="submit" value="Submit" /></form>HTML 表单(Form)常用控件(Controls)HTML 表单(Form)常用控件有：      input type="text" 单行文本输入框 input type="submit" 将表单(Form)里的信息提交给表单里 action 所指向的文件 input type="checkbox" 复选框 input type="radio" 单选框 select 下拉框 textArea 多行文本输入框 input type="password" 密码输入框(输入的文字用*表示)表单控件(Form Control)：单行文本输入框(input type="text")单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。

例句如下： <input type="text" name="yourname">表单控件(Form Control)：复选框(input type="checkbox")复选框允许用户在一组选项里，选择多个。

示例代码： <input type="checkbox" name="fruit" value ="apple">苹果<br> <input type="checkbox" name="fruit" value ="orange">桔子<br> <input type="checkbox" name="fruit" value ="mango">芒果<br> 用 checked 表示缺省已选的选项。

<input type="checkbox" name="fruit" value ="orange" checked>桔子 <br>表单控件(Form Control)：单选框(input type="radio")使用单选框，让用户在一组选项里只能选择一个。

示例代码： <input type="radio" name="fruit" value = "Apple">苹果<br> <input type="radio" name="fruit" value = "Orange">桔子<br> <input type="radio" name="fruit" value = "Mango">芒果<br> 用 checked 表示缺省已选的选项。

<input type="radio" name="fruit" value = "Orange" checked>桔子<br>表单控件(Form Control)：下拉框(select)下拉框(Select)既可以用做单选，也可以用做复选。

单选例句如下： <select name="fruit" > <option value="apple">苹果 <option value="orange">桔子 <option value="mango">芒果 </select> 如果要变成复选，加 muiltiple 即可。

用户用 Ctrl 来实现多选。

例句： <select name="fruit" multiple> 用户还可以用 size 属性来改变下拉框(Select)的大小。

表单控件(Form Control)：多行输入框(textarea)多行输入框(textarea)主要用于输入较长的文本信息。

例句如下： <textarea name="yoursuggest" cols ="50" rows = "3"></textarea> 其中 cols 表示 textarea 的宽度，rows 表示 textarea 的高度。

表单控件(Form Control)：密码输入框(input type="password")密码输入框(input type="password")主要用于一些保密信息的输入，比如密码。

因为用户输入的时候，显示的不是输入的内容，而是黑点符号。

例句如下： <input type="password" name="yourpw">表单控件(Form Control)：提交(input type="submit")通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里 action 所指向的文件。

例句如下： <input type="submit" value="提交">表单控件(Form Control)：图片提交(input type="image")input type=image 相当于 input type=submit，不同的是，input type=image 以一个图片作为表单的提交按钮，其中 src 属性表示图片的路径。

<input type="image" src ="/images/icons/go.gif" alt = "提交" NAME="imgsubmit"> 提示和注释：提示：请使用 label 元素为某个表单控件定义标签。

带有两个输入字段和相关标记的简单 HTML 表单：<form><label for="male">Male</label><input type="radio" name="sex" id="male" /> <br /><label for="female">Female</label><input type="radio" name="sex" id="female" /> </form>可选的属性DTD 指示此属性允许在哪种 DTD 中使用。

S=Strict, T=Transitional, F=Frameset. 属性值描述规定 label 与哪个表单元素绑定。

DTDforelement_idSTF标准属性id, class, title, style, dir, lang, xml:lang如需完整的描述，请访问标准属性。

事件属性accesskey, onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup如需完整的描述，请访问事件属性。

<input>标签。

可选的属性DTD 指示此属性允许在哪种 DTD 中使用。

S=Strict, T=Transitional, F=Frameset. 属性值描述规定通过文件上传来提交的文件的类型。

不赞成使用。

规定图像输入的对齐方式。

DTDacceptmime_typeSTF TFalign    left right top middle bottomalt checked disabled maxlength name readonly size src typetext checked disabled number field_name readonly number_of_char URL定义图像输入的替代文本。

规定此 input 元素首次加载时应当被选中。

当 input 元素加载时禁用此元素。

规定输入字段中的字符的最大长度。

定义 input 元素的名称。

规定输入字段为只读。

定义输入字段的宽度。

定义以提交按钮形式显示的图像的 URL。

规定 input 元素的类型。

STF STF STF STF STF STF STF STF STF         button checkbox file hidden image password radio reset submit text valuevalue规定 input 元素的值。

STF标准属性id, class, title, style, dir, lang, xml:lang如需完整的描述，请访问标准属性。