文本域标签（文本域标签属性）

各位老铁们，大家好，今天由我来为大家分享文本域标签，以及文本域标签属性的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注搜藏下本站，您的支持是我们更大的动力，谢谢大家了哈，下面我们开始吧！

本文主要内容一览

• 1、在使用表单时文本域的类型有几种
• 2、表单文本域的3个类型
• 3、安卓开发materialdesign文本域的使用
• 4、Html—让textarea标签中的内容原格式输出的两种办法

文本域标签（文本域标签属性）

1在使用表单时文本域的类型有几种

文本域是用户在其中输入响应的表单对象。有三种类型的文本域：

单行文本域通常提供单字或短语响应，如姓名或地址。

多行文本域为访问者提供一个较大的区域，供其输入响应。可以指定访问者最多可输入的行数以及对象的字符宽度。如果输入的文本超过这些设置，则该域将按照换行属性中指定的设置进行滚动。

密码域是特殊类型的文本域。当用户在密码域中键入时，所输入的文本被替换为星号或项目符号，以隐藏该文本，保护这些信息不被看到。

页面布局效果如下:

2、制作网页跳转菜单

打开一个建立好的网页文件，把鼠标的光标放置在需要插入跳转菜单的位置。选择表单插入栏中的“跳转菜单”命令，在网页中插入一个跳转菜单。

在弹出的“跳转菜单”对话框中，根据提示输入相应内容：

点击确定，按F12预览效果。

3、运行代码实例

新建文件12.html。

打开12.html，插入表单，在表单中插入一个文本区域，在回车，再插入一个按钮。

选中文本区域，在属性面板中，设置文本区域的文本宽度为50，行数为8。

选中按钮，在属性面板中，将按钮的值设为“运行代码”。

选中form表单，在属性面板中，单击动作文本框旁的“浏览按钮”，选择指向13.html，目标选择_blank。

在11.html的代码区复制整个代码，在打开12.html文件，在设计视图中选中文本区域，转到代码区，将光标放置在的“

认识表单对象

使用表单，可以帮助Internet服务器从用户那里收集信息，例如收集用户资料、获取用户订单，在Internet上统也同样存在大量的表单，让用户输入文字进行选择。

1、通常表单的工作过程如下：

(1)访问者在浏览有表单的页面时，可填写必要的信息，然后单击“提交”按钮。

(2)这些信息通过Internet传送到服务器上。

(3)服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。

(4)当数据完整无误后，服务器反馈一个输入完成信息。

2、一个完整的表单包含两个部分：

(1)一个是在网页中进行描述的表单对象。

(2)二是应用程序，它可以是服务器端的，也可以是客户端的，用于对客户信息进行分析处理。

二、认识表单对象

在 Dreamweaver 中，表单输入类型称为表单对象。可以通过选择“插入”“表单对象”来插入表单对象，或者通过从下图显示的“插入”栏的“表单”面板访问表单对象来插入表单对象。

1、表单

“表单”在文档中插入表单。任何其他表单对象，如文本域、按钮等，都必须插入表单之中，这样所有浏览器才能正确处理这些数据。

2、文本域

“文本域”在表单中插入文本域。文本域可接受任何类型的字母数字项。输入的文本可以显示为单行、多行或者显示为项目符号或星号(用于保护密码)。

3、复选框

“复选框”在表单中插入复选框。复选框允许在一组选项中选择多项，用户可以选择任意多个适用的选项。

4、单选按钮

“单选按钮”在表单中插入单选按钮。单选按钮代表互相排斥的选择。选择一组中的某个按钮，就会取消选择该组中的所有其他按钮。例如，用户可以选择“是”或“否”。

5、单选按钮组

“单选按钮组”插入共享同一名称的单选按钮的集合。

6、列表/菜单

“列表/菜单”使您可以在列表中创建用户选项。“列表”选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。“菜单”选项在弹出式菜单中显示选项值，而且只允许用户选择一个选项。

7、跳转菜单

“跳转菜单”插入可导航的列表或弹出式菜单。跳转菜单允许您插入一种菜单，在这种菜单中的每个选项都链接到文档或文件。请参见创建跳转菜单。

8、图像域

“图像域”使您可以在表单中插入图像。可以使用图像域替换“提交”按钮，以生成图形化按钮。

9、文件域

“文件域”在文档中插入空白文本域和“浏览”按钮。文件域使用户可以浏览到其硬盘上的文件，并将这些文件作为表单数据上传。

10、按钮

“按钮”在表单中插入文本按钮。按钮在单击时执行任务，如提交或重置表单。可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标签之一。

11、标签

“标签”在文档中给表单加上标签，以形式开头和结尾。

12、字段集

“字段集”在文本中设置文本标签。

认识了表单，那么创建和使用表单时就可以根据需要进行选择。表单时动态网页的灵魂。

文本域标签（文本域标签属性）

2表单文本域的3个类型

form 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

注释：form 元素是块级元素，其前后会产生折行。

2.form表单的作用

表单在网页中主要负责数据采集功能，也就是和里面包含的数据将被提交到服务器或者电子邮件里。

一个表单有三个基本组成部分：

表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

表单按钮：包括提交按钮、复位按钮和一般按钮。

3.form语法格式分为两种

通用格式：

不通用格式：

4.表单中的类型

文本类型

文本框 密码框 隐藏域 多行文本框

选择类型

单选 多选 下拉特殊类型

按钮类型

普通按钮 提交按钮（可以用作图片） 重置按钮

其他类型

上传文件（file） 选择日期（date） 邮箱（email） 链接（url） 颜色（color） 范围（range）

3安卓开发materialdesign文本域的使用

Material Design是谷歌在2014年IO大会上推出的界面设计语言，但在早期阶段，它主要用于界面设计，而不是开发人员，因此使用它的人并不多。在2015年新的IO大会之前，谷歌为开发者推出了一个设计支持库，用于封装Material Design中最具代表性的控件和效果，怎样快速开启规范的安卓Android Material Design设计？Material Desig设计规范是什么......

为了以上问题，设计师往往会使用Material Design UI工具包，来使界面设计更加规范便捷。本篇文章将分享一款大厂设计师常用的安卓Android Material Design UI工具包，并详细介绍此款UI工具包的使用教程。

1. Android Material Design UI工具包

Pixso资源社区内置 安卓Material UI 工具包 。安卓Android 的用户界面通常包含以下4个部分的组件：状态栏、应用程序栏（导航栏）、内容区、底部导航栏。

1.1 内容区、状态栏、应用程序栏、导航栏

Android Material Design的内容区是放置主要内容的地方。例如，文本、图片、插图、视频等。接下来，我们将详细地讨论应用程序栏和底部导航栏。

状态栏是24。而应用程序栏通常由一个标题和一些图标组成，18是Material Design的默认标题文字大小。

底部导航栏可以有2-5个标签，一般情况下不超过5个。如果实在要放置5个以上的标签，可以考虑用文字标签代替图标标签。

底部导航栏的图标设计应该简洁易懂，让用户一看就知道每个图标的含义。

1.2 卡片

Android Material Design UI工具包的卡片通常是通往详细信息的入口。卡片可以包含一个主题的照片、文字和链接。它们可以显示包含不同尺寸的元素的内容，例如有可变长度标题的照片。卡片集是多个卡片在同一平面上的布局结构。

1.3 边缘和边距

也许你已经注意到，16dp 是Android Material Design 左右边距的标准值。根据页面设计风格，有时使用8，有时使用24，但在大多数情况下，不建议使用小于16的数值。然而，当在卡片内放置文本或图片内容时，可以用8dp的边距。8dp的边距不会让用户界面看起来拥挤，但需要确保卡片内的内容与卡片边缘之间至少留有12dp的边距。

作为一个Android Material Design 初学者，只需在界面的两边留出16dp。随着经验的增加，你会掌握越来越多利用空间的技巧。

1.4 按钮

当使用按钮时，应该让数值尽量达到48dp高。Android Material Design设计指南建议，任何可触摸的区域应该至少是48x48dp，低于这个数值会使点击的准确性大大降低。当使用2个并排的按钮时，它们之间至少要保持16dp的间距，这样才不会误触。 当然，你也可以根据项目场景使用更小或更大的按钮，但要确保在48dp的半径内没有其他可点击的UI元素。

在这里，Pixso设计师不建议使用低于32dp高的按钮，尤其是CTA号召性按钮。对于主要行动的按钮，请保持在40-56 dp之间。在一个48dp高的按钮中，文本标签的尺寸最好是14-16。当使用大写字母时，可以变为12，但不建议小于这个数值。

2. Material Design UI工具包使用教程

看完上述Android Material Design的相关内容，你是否有所收获？如果你对具体数值仍感到迷惑，不如打开Pixso资源社区的安卓Material UI 工具包进一步查看。使用Pixso社区中的Material Design工具包来开启手机界面设计尺寸便是小菜一碟。你所要做的就是遵循这些简单的步骤：

第一步：浏览器打开Pixso官网，免费注册Pixso账号。

第二步：进入Pixso资源社区，搜索框输入【Material Design】关键词，找到安卓Android Material UI工具包。

第三步：打开安卓Android Material UI工具包，在Pixso 工作台进行在线编辑。

除此之外，Pixso资源社区内置海量国内外大厂的设计系统及组件库，包括TDesign、Arco Design、Ant Design、Element等优秀设计规范，所有大厂组件库资源均可一键调用，可以学习最新的设计规范，统一项目视觉效果。颜色、文本样式、图层样式不仅可以一键保存为资源，还可搭配起来重复添加为组件资源共享到团队，实现快速复用，注册Pixso账号，即可进入资源社区免费下载使用Material Design设计模板 。

4Html—让textarea标签中的内容原格式输出的两种办法

在没有使用编辑器而是使用了文本域 textarea 的情况下，用户所输入的内容呈现的效果并不理想，比如：原本的换行没有保留，全部成了单行显示。

要让在 textarea 中输入的内容原格式输出有一下两种办法：

使用 pre 标签是我最开始采用的办法，但是这种方法也有一定的缺陷,比如说我们在使用的编辑器的时候，换行、Tab、空格都会影响到输出结果。如图：

并且， pre 标签本身自带得有一些样式，比如字体等。如果你的页面有引入bootstrap等css框架，那么受样式影响就更多了，你得再写去覆盖。

因此，这种方法并不推荐。

我们先来看一下 white-space 的定义和属性：

其属性有：

也就是说，我们可以使用 white-space:pre-warp 或 white-space:pre-line 达到我们想要的效果。

两者的区别是：

如图：

white-space:pre-warp 效果如下：

white-space:pre-line 效果如下：

因此，更推荐使用第二种方法。

本文网址：https://www.wzmoban.cn/hangye/1541.html

版权声明： 1.本站内容部分为晟匠聚网络编辑原创文章，部分来源于网络，如需转载，请标注来源网站名字和文章出处链接。 2.本站内容为传递信息使用，仅供参考，也不构成相关建议。 3.部分内容和图片来源于网络，如有侵权，请联系我们处理。