表单元素盘点第二弹<form><textarea>元素详细介绍

简介: <form><textarea>元素详细介绍

1、标签

用于为用户创建HTML表单,表单能够包含input元素。该元素为块级元素,前后会产生折行。


还可以包含menu,textarea,fieldset,legend和label元素。


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


属性

  • accept-charset:规定服务器可以处理表单字符集。


属性值:

  1. UTF-8
  2. ISO-8895-1
  3. GB2312

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


属性值 描述
相对URL 指向站内的文件(如,src=“example.htm”)
绝对URL 指向其他站点(如,src="www.baidu.com")
<form action="form_action.asp" method="get"><!--数据会提交到名为“form_action.asp”的表单-->

  • autocomplete:是否启用表单的自动完成功能。


自动完成允许浏览器预测对字段的输入,当用户在字段开始输入时,浏览器基于之前输入过得值,应该显示出在字段中填写的选项。

属性值 描述
on 默认值,开启自动完成功能。
off 禁止启用自动完成功能
<form action="form_action.asp" method="get"><!--数据会提交到名为“form_action.asp”的表单-->

  • enctype :规定在发送到服务器之前应该如何对表单数据进行编码。
属性值 描述
application/x-www-form-urlencoded 在发送前对所有字符进行编码(默认值)。
mulitpart/form-data 不对字符编码,当使用有文件上传控件的表单时,该值是必需的。
text/plain 将空格转换为“+”,但不编码特殊字符。


默认地表单会编码为:application/x-www-form-urlencoded,所有字符都会进行编码(空格转为“+”,特殊字符转换为ASCII值)

<form action="form_action.asp" method="get" enctype="application/x-www-form-urlencoded" >

  • method:如何发送表单数据(表单数据发送到action属性所规定的页面)
属性值 描述
post 以HTTP post事务的形式发生表单数据。
get 以URL追加表单数据: URL?name=value&name=value


如果希望获得最佳表单传输性,可以采用GET方法发送到只有少数简短字段的小表单。


对于有许多字段或是很长的文本域的表单,采用POST方法。


若是编写服务器的小白,就GET就OK,若想安全性高,则用POST肯定没毛病。

<form action="form_action.asp" method="get"  >

  • name:表单的名称。提供了一种在脚本中引用表单的方法。
<form action="form_action.asp" method="get"  name="myform" >

  • novalidate:规定当提交表单时不对其进行验证。
<form action="form_action.asp" novalidate="novalidate" >

  • rel:规定当前文档和被链接文档之间的关系
属性值 描述
external

规定引用的文档不是当前站点的一部分

help 链接到帮助文档
license 链接到文档的版权信息
next 集合中的下一个文档
nofollow 链接到未经认可的文档
noreferrer 规定如果用户点击该超链接,则浏览器不应发送HTTP推荐标头
prev 集合中的上一个文档
search 链接到文档的搜索工具

  • target:在何处打开action URL
属性值 描述
_blank 在新窗口/选项卡中将表单提交到文档。
_self

在同一框架中将表单提交到文档(默认值)。

_parent 在父框架中将表单提交到文档。
_top 在整个窗口中将表单提交到文档。
framename 在指定的框架中将表单提交到文档。

2、元素:

定义多行的文本输入控件,文本框中可容纳无线数量的文本。

文本默认字体是等宽字体(Courier)

可以通过cols和rows属性来规定textarea文本框的尺寸,但最好使用CSS样式的height和width属性来设置。


注意:在输入区内的文本行间,用(%OD%A)空格/换行 进行分隔。


属性:


  • autofocus属性(逻辑属性)

规定在页面加载后文本区域自动获得焦点

<form action="form_action.asp" >
   <textarea autofocus>我在这里</textarea> 
</form>


效果图:

获得焦点image.png    未获得焦点image.png


  • cols属性/rows属性:

规定textarea的可见宽度/高度。

<form action="form_action.asp" >
   <textarea rows="3" cols="20">我在这里</textarea> 
 </form> 
<!--宽:20字符 高:3行

效果图:

image.png


  • disabled属性:

禁用文本区,被禁用的文本区既不可用,也不可点击。

<form action="form_action.asp" >
   <textarea rows="3" cols="20" disabled>我在这里</textarea> 
</form>


效果图:

image.png


  • form属性:

规定文本区域所属的一个或多个表单。


属性值:必须是同一个文档中的某个元素的id属性。


位于表单之外的文本区域仍是表单的一部分。

<form action="form_action.asp" id="userform">
   Name:<input type="text" name="username"/>
   <input type="submit"/>
</form>
<textarea name="comment" form="userform">在此处输入…</textarea>
<!--位于表单之外的文本区域仍是表单的一部分-->


效果图:

image.png


  • maxlength属性:

规定文本区域的最大长度(以字符来计算)。

<form action="form_action.asp" id="userform">
    <textarea maxlength="30">在此处输入…</textarea>
 <input type="submit"/>
 </form>


效果图:

image.png


就这么长!!!


  • name属性:

文本区域规定名称,用于在JS中对元素进行引用或在表单提交之后,对数据进行引用。


很常规不多说。下一位


  • placeholder属性:

用于描述文本区域预期值的简短提示。


该提示会在文本区域为空时显示,当输入时则会消失。

<form action="form_action.asp" id="userform">
    <textarea placeholder="开始你的表演"></textarea>
<input type="submit"/>
</form>


效果图:


前:image.png后:image.png


  • readonly属性:

设置文本区为只读。


在只读的文件中,无法对内容进行修改,但用户可以通过tab键切换到该控件,选取或复制其中的内容。

<form action="form_action.asp" id="userform">
    <textarea readonly>感谢支持和一键三连</textarea>
<input type="submit"/>
</form>


效果图:

image.png


一整个就是连光标都没有。


  • required属性:

设置该属性,文本区域则必填。

<form action="form_action.asp" id="userform">
    <textarea required></textarea>
<input type="submit"/>
</form>


效果图:按了提交后呈现

image.png


  • wrap属性:

规定当在表单提交时,文本区域中的文本如何换行。

属性值 描述
soft 当在表单提交时,textarea中的文本不换行。(默认值)
hard

当在表单提交时,textarea在的文本换行。

必须规定cols属性。


<form action="form_action.asp" id="userform">
    <textarea rows="2" cols="20" wrap="hard">Welcome to my blog,thank you very much</textarea>
<input type="submit"/>
</form>



目录
相关文章
|
Linux
linux mv移动文件命令详解与替换强制覆盖多个文件
命令语 法 mv [-bfiuv][–help][–version][-S &lt;附加字尾&gt;][-V &lt;方法&gt;][源文件或目录][目标文件或目录]
4139 0
|
Ubuntu Linux 网络安全
Linux:使用ntpdate命令同步更新系统时间
Linux:使用ntpdate命令同步更新系统时间
4148 0
|
Android开发
KernelSU基于内核的 SU。它通过自定义内核,直接在内核中赋予目标进程 root 权限。
KernelSU基于内核的 SU。它通过自定义内核,直接在内核中赋予目标进程 root 权限。
4554 0
|
2月前
|
监控 网络协议 Linux
Gobuster目录/文件扫描工具
Gobuster 是用 Go 语言编写的高效命令行扫描工具,支持目录/文件暴力扫描、子域名枚举和虚拟主机发现。其多线程机制使扫描速度快,资源占用低,适合远程或云服务器使用。它具备灵活性,支持自定义字典、代理、HTTP 认证等功能,适用于敏感目录查找、资产管理、渗透测试等场景。此外,Gobuster 可通过安装在 Kali 或 Linux 系统上,快速执行各类扫描任务,是安全测试和自动化脚本的理想选择。
279 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9882 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
9月前
|
机器学习/深度学习 自然语言处理 计算机视觉
RT-DETR改进策略【Backbone/主干网络】| CVPR 2024 替换骨干网络为 RMT,增强空间信息的感知能力
RT-DETR改进策略【Backbone/主干网络】| CVPR 2024 替换骨干网络为 RMT,增强空间信息的感知能力
378 13
RT-DETR改进策略【Backbone/主干网络】| CVPR 2024 替换骨干网络为 RMT,增强空间信息的感知能力
|
10月前
|
监控 搜索推荐 开发工具
2025年1月9日更新Windows操作系统个人使用-禁用掉一下一些不必要的服务-关闭占用资源的进程-禁用服务提升系统运行速度-让电脑不再卡顿-优雅草央千澈-长期更新
2025年1月9日更新Windows操作系统个人使用-禁用掉一下一些不必要的服务-关闭占用资源的进程-禁用服务提升系统运行速度-让电脑不再卡顿-优雅草央千澈-长期更新
1010 2
2025年1月9日更新Windows操作系统个人使用-禁用掉一下一些不必要的服务-关闭占用资源的进程-禁用服务提升系统运行速度-让电脑不再卡顿-优雅草央千澈-长期更新
|
开发框架 .NET 数据库
全面掌握Entity Framework Core高级查询技巧:详解自定义函数与聚合函数的实现方法及应用场景,附带完整代码示例与最佳实践指导
【8月更文挑战第31天】在使用 Entity Framework Core (EF Core)进行数据访问时,常需执行复杂的数据库操作,如自定义函数调用或使用聚合函数汇总数据。EF Core 支持在 LINQ 查询中使用自定义与聚合函数,满足高级查询需求。
255 1
|
Linux 网络安全
在Linux中,如何设置防火墙规则?
在Linux中,如何设置防火墙规则?
|
SQL 存储 开发框架
Entity Framework Core 与 SQL Server 携手,高级查询技巧大揭秘!让你的数据操作更高效!
【8月更文挑战第31天】Entity Framework Core (EF Core) 是一个强大的对象关系映射(ORM)框架,尤其与 SQL Server 数据库结合使用时,提供了多种高级查询技巧,显著提升数据操作效率。它支持 LINQ 查询,使代码简洁易读;延迟加载与预先加载机制优化了相关实体的加载策略;通过 `FromSqlRaw` 或 `FromSqlInterpolated` 方法支持原始 SQL 查询;可调用存储过程执行复杂任务;利用 `Skip` 和 `Take` 实现分页查询,便于处理大量数据。这些特性共同提升了开发者的生产力和应用程序的性能。
602 0