html表单标签属性、html制表标签 收藏 0

初识HTML——列表标签和表单标签

在html中列表分为无序列表、有序列表和自定义列表（项目列表）。接下来就看看他们有什么不同吧！

作用：如果说table标签是用来显示数据的，那么列表标签就是用来进行html页面布局的。

• 无序列表

语法：

<ul></ul>标签中只能且必须嵌套<li></li>标签。li标签之间没有先后顺序，是并列存在的。li标签里可以容纳文本、数据、图片、超链接等内容。跟table一样，列表标签也自带样式属性，但为了代码统一，我们还是会使用css来设置。

代码示例：

运行界面：

• 有序列表

语法：

<ol></ol>标签里面只能嵌套<li></li>标签，在这里li标签是有顺序的。

代码示例：

运行界面：

• 自定义列表

语法：

<dl></dl>标签：定义列表

<dt></dt>标签：列表标题

<dd></dd>标签：列表内容

一个dd标签是对dt标签标题的说明。这两个标签中可以包含任何标签。

代码示例：

运行界面：

作用：收集用户信息。一般用在注册界面等。

组成：一个完整的表单中包含表单域（整个填写界面所有信息）、表单控件（表单元素）和提示信息（表单控件的提示作用）3个部分。

• 表单域

表单域：是一个包含表单元素的区域。

<form>标签用于定义表单域，实现用户信息的收集和传递。

作用：将其区域范围内的信息收集并传送给服务器。

语法：

注：action：url地址，指定接收并处理表单数据的服务器程序的url地址。

method：用于设置表单数据的提交方式。

method=”get”：提交数据时，地址栏可查看到数据。数据量少且安全级别不高时使用。

method=”post”：提交数据时，地址栏数据是加密的。

name：表单域的名称。用于区分同一页面下的不同表单域。

• 表单控件

1.input输入表单元素：

语法：<input type=””>，依据type属性值不同区分不同控件。

文本框：<input type=”text”>。单行输入字段，默认宽度20个字符。输入的文字可见。

密码框：<input type=”password”>。输入内容默认不可见。

单选框：<input type=”radio”>，默认情况下选中后无法取消。

注：为实现多选一状态，需要将所有的单选框控件具有同一个name名。

复选框：<input type=”checkbox”>，选中后可以更改可以取消。

提交按钮：<input type=”submit”>，默认按钮中的提示文字是提交，可以通过value值进行更改内容。点击提交按钮后会把表单数据发送到服务器。

重置按钮：<input type=”reset”>，默认按钮中的提示文字是重置，可以通过value值进行更改内容。点击后会清楚表单中的所有数据。

普通按钮：<input type=”button”>

文件域：<input type=”file”>，用来选择文件，一般适用于文件上传。

label标签：标注标签，配合input控件一起使用

作用：绑定表单控件，扩大点击范围。

当点击label标签的内容时，系统会自动选中该表单控件。

代码示例：

运行界面：

Input控件属性：

name:用户自定义，提示input元素的名称。给后台工作人员的提示。

value：用户自定义，提示input元素的内容值。给后台的提示。在文本框控件中会显示该内容，单选框和复选框则显示不出来。

checked：默认选中状态。主要用于单选按钮和复选按钮中。

maxlength：正整数，规定输入字段中的字符最大长度。

input代码示例：

运行界面：

2.select下拉表单元素：

使用场景：地址选择、职业分类、学校分类等。

select标签：定义下拉列表。

语法：

代码示例：

运行界面：

3.textrea文本域表单控件

使用场景：留言、介绍、评论等。

语法：

跟文本框控件不同，它是多行文本输入框，可以自行设定行数以及一行容纳多少字数。

rows=“每行可输入的字符数”，

cols=“显示的行数”。

这两个样式属性实际开发中大多使用css就可以改变操作。

代码示例：

运行界面：

关于HTML基础内容就学习到这里了，明天练习一个综合案例。对了，现在跟学的是黑马前端的pink老师发布的基础视频，明天做的案例按照老师讲解的案例去做。

HTML5教程从入门到精通，随堂笔记（二）H5的form标签

HTML5从入门到精通，兄弟连京修随堂笔记（二）HTML的框架结构，每日都有新内容，订阅走一波

HTML5的form标签

问：网站怎样与用户进行交互? 答案:使用HTML表单(form).

表单是可以把浏览者输入的数据传送到服务器端的程序(比如ASP,PHP)的HTML元素,服务器端程序可以处理表单传过来的数据,从而进行一些动作.比如,bbs,blog的登陆系统,购物车系统等.

form 标签 — 代表HTML表单

form标签是成对出现的,以<form>开始,以</form>结束

常用属性.

action — 浏览者输入的数据被传送到的地方,如一个PHP页面(dofm.php)

method — 数据传送的方法

get — 此方式传递数据量少,但是传递的信息显示在网址上。

post –此方式传送信息多,而且不会把传递信息显示在网址上

enctype — 表示将数据发送到服务器时浏览器使用的编码类型

application/x-www-form-urlencoded — 窗体数据被编码为名称/值对.这是标准的编码格式.默认的。

multipart/form-data — 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分.

text/plain — 以纯文本形式进行编码,其中不含任何控件或格式字符

HTML5 input标签

input 标签 — 代表HTML表单的单行输入域

input标签是单独出现的,<input />

属性.

type — 代表一个输入域的显示方式(分为输入型,选择型,点击型)

name – 此表单项名称

value — 输入域的值

size — 输入域的长度

maxlength — 输入域最多可以输入文字的长度

checked — 如果是选择型的输入域,代表已经被选择，值为checked

readonly — 输入域可以选择,但是无法修改 ，值为readonly

disabled — 输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用。如：disabled=\”disabled\”

accesskey — 表单的快捷键访问方式，如值为h即按Alt+h快捷键。

tabindex — 输入域的\”tab\”键遍历顺序

src — 当使用图片来表示按钮时,代表图片的位置(URI)

alt — 用来替换提交按钮的图片(当在input的src属性定义的图片无法显示时)提示信息。

type属性 — 代表HTML表单,单行输入域(框)的表现方式

type属性取值:

text — 文字输入域(输入型)

password — 也是文字输入域,但是输入的文字以密码符号\’*\’显示(输入型)

file — 可以输入一个文件路径(输入型)

checkbox — 复选框.可以选择零个或多个(选择型)

radio — 单选框.只可以选择一个而且必须选择一个(选择型)

hidden — 代表隐藏域,可以传送一些隐藏的信息到服务器

button — 按钮(点击型)

image — 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src属性)(点击型)

submit — 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性来显示按钮上的文字(点击型)

reset — 重置按钮,可以把表单中的信息清空(点击型)

select 标签 — 选择列表标签

select标签是成对出现的,以<select>开始,以</select>结束

此标签中的每对option标签代表一个选择项

属性:

name – 表单项名称

size — 选择域的高度

multiple — 可以有多个选择

disabled — 以灰色显示,在表单中不起任何作用

tabindex — 使用\”tab\”键的遍历顺序

option 标签 — 代表选择列表的一个选择项

option标签是成对出现的,以<option>开始,以</option>结束

属性:

label — 说明选择项

value — 说明选择项的值

selected — 此选择项已经被选择

disabled — 输入框无法获得焦点,以灰色显示,在表单中表示禁用

tabindex — 使用\”tab\”键的遍历顺序

超文本标记语言表单标签详解，教你如何合理利用表单收集用户信息

无论我们使用什么语言来完成web开发，都必然会用到HTML表单标签，HTML表单标签在开发中经常会被我们用来去收集我们想要得到的数据信息，基本上所有的网页都有表单的利用，表单合理的使用和布局是作为一个前端开发者所必须具有的基本技能。

表单标签结构树：

表单的基本构成元素

在网页开发中<form>标签代表一个表单，表单用于向服务器传输数据。

<form>标签能够包含<input>，通过更改<input>的属性值，可以空指<input>是文本字段，复选框，单选框或提交按钮等。还可以包含<textarea> <select>等。学习表单很大程度程度上就是在学习<input>标签。

<form>常用属性:

name:用于定义表单的名称

action:用于规定提交表单时向何处发送表单数据。

method:用于规定提交的方式。一般取值 POST或GET

<input> 标签用于搜集用户信息，是表单中出现频率最高的标签。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

<input>标签type属性值 :

text属性：

<input type=”text”>

定义为单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

常用属性:

name:定义标签名称

value:定义标签值

size:定义输入字段的长度

maxlength:定义可输入最大字符个数

password属性：

<input type=”password”>

定义密码字段。该字段中的字符被掩码.

常用属性:

name:定义标签名称

value:定义标签值

size:定义输入字段的长度

maxlength:定义可输入最大字符个数

密码输入框内输入信息被掩码

radio属性：

<input type=”radio”>

定义单选按钮。

常用属性:

name:定义标签名称.注意，对于单选按钮，如果要想做到单一选择，多个radio的name值必须一样。

value:定义标签值

checked:定义该标签默认被选中。

只能选择男或女设置默认选择男

checkbox属性：

<input type=”checkbox”>

定义复选框。

常用属性:

name:定义标签名称.注意，一组的checkbox它们的name值应该是一样的。

value:定义标签值

checked:定义该标签默认被选中。

复选框，默认状态只选择足球

复选框，多选状态

file属性：

<input type=”file”>

定义输入字段和 \”浏览\”按钮，供文件上传。

常用属性:

name:定义标签名称

点击选择文件将选择文件上传

button属性：

<input type=”button”>

定义可点击按钮（大多数情况下，用于通过 JavaScript 启动脚本）

常用属性:

name:定义标签名称

value:按钮显示名称

submit属性：

<input type=”submit”>

定义提交按钮。提交按钮会把表单数据发送到服务器。

常用属性:

name:定义标签名称

value:按钮显示名称

reset属性：

<input type=”reset”>

定义重置按钮。重置按钮会清除表单中的所有数据。

常用属性:

name:定义标签名称

value:按钮显示名称

点击充值按钮表单信息被清空点击submit将提交数据

image属性：

<input type=”image”>

定义为图像形式的提交按钮。

常用属性:

name:定义标签名称

src:定义作为提交按钮显示的图像的url

alt:定义作用图像的替代文本。

这个标签主要是用了替换submit按钮，因为默认产生的提交按钮并不漂亮，这个标签允许你采用指定的图片作为提交按钮。

点击图片与点击submit按钮作用效果一样

hidden属性：

<input type=”hidden”>

定义隐藏的输入字段。

常用属性:

name:定义标签名称

value:定义标签值

hidden所定义出来的输入框和值是在页面上看不到但却又真实存在的，在开发中常用来放入一些不希望用户看到，但却对开发过程很有帮助的数据。

<textarea>标签用于定义一个多行文本输入控件(多行文本框,文本域)

常用属性:

name:定义多行文本框名称

cols:定义多行文本框可见宽度

rows:定义多行文本框可见行数

wrap:规定多行文本框中文字如何换行。

5行30列文本域默认值是写在标签对之间的值

1.<select>

用于定义一个下拉列表

常用属性:

name:定义下拉列表的名称

size:定义下拉列表中可见选项的数目

multiple:定义可选择多个选项

2.<option>

用于定义下拉列表中的选项。

<option>需要位于<select>标签内部

常用属性:

value:定义送往服务器的选项值

selected:定义选项为选中状态。

设置默认选中状态为天津

注意：

关于POST与GET方式区别:

1. get方式只能少量数据,而post可以携带大数据。

2. get方式提交时，数据会在地址栏上显示，安全性差。Post方式提交不会在地址栏上显示数据，更加安全。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com