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

news2025/1/25 9:06:56

博主有话说:如果有描述错误之处请大家纠正。让我们可以一起学习一起进步。

个人主页:GUIDM主页

内容专栏:干货

此块内容为纯纯的干货,略显乏味枯燥,是笔记向的blog。如果觉得还不错,希望你可以一键三连,一整个大感谢。

 对于表单元素,我感觉真的用处非常大,上一篇blog我盘点了input元素的属性,今天就来盘点一下<form><textarea>属性!收藏起来不会走丢喔!!

0f8ff8b4a7894685b72f34bcd6c59404.png

 

1、<form>标签

用于为用户创建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" autocomplete="on" >

  • 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、<textarea>元素:

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

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

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

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

属性:

  • autofocus属性(逻辑属性)

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

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

效果图:

获得焦点a3afcc1eb2964d098511fa4d8270df5a.png未获得焦点f11c7566a9474b6ba032d1e86177042b.png


  •  cols属性/rows属性:

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

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

效果图:

f5a8615b81a6415c8b7bbdbdf49695b1.png


  • disabled属性:

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

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

 效果图:

f2375f922f8e46c8854720dbbaf93b03.png


  • form属性:

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

属性值:必须是同一个文档中的某个<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>
<!--位于表单之外的文本区域仍是表单的一部分-->

效果图:

ccb9ffd38ad44b498666fd95e74a2993.png


  •  maxlength属性:

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

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

效果图:

cce661ace5ea435eb8fc82431509ce7a.png

就这么长!!!


  • name属性:

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

很常规不多说。下一位


  • placeholder属性:

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

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

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

效果图:

前:a78a29282a3343749be55b984b34928c.png后:82f8600776e443a78278bdbf8c28a9e0.png


  •  readonly属性:

设置文本区为只读。

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

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

 效果图:

46bb5f1d91d34cceaac7fbd438595779.png

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


  •  required属性:

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

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

效果图:按了提交后呈现

a1bf728624ce41e09d56a202fe4d008e.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>

 感谢大家看到最后,欢迎点赞收藏评论!

 

 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407799.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue2的响应式原理

--------Vue2响应式原理---------- 原理&#xff1a;通过数据劫持 defineProperty 发布订阅者模式&#xff0c;当 vue 实例初始化后 observer 会针对实例中的 data 中的每一个属性进行劫持并通过 defineProperty() 设置值后在 get() 中向发布者添加该属性的订阅者&#xff0c…

基于RuoYi若依vue的数据分页功能的前后端代码详解

目录 1.前端代码 1.1首先在前端会有一个 组件&#xff0c;为分页组件 1.2前端获取列表函数以及访问后端的URL与请求方式 1.3开发者工具查看前端访问后端信息 1.4开发者工具查看前端接收到后端的回应信息 2.后端代码 2.1接口 2.2接口内方法的代码 2.3后端Log输出如下 1.前…

IntersectionObserver API详解

过去&#xff0c;要检测一个元素是否可见或者两个元素是否相交并不容易&#xff0c;比如实现图片懒加载、内容无限滚动等功能时&#xff0c;都需要通过​getBoundingClientRect()​写大量的逻辑计算或者依靠scroll事件监听等性能很差方式来实现。 现在&#xff0c;依靠Interse…

Object.prototype.toString.call()的原理

今天在项目中看到了用Object.prototype.toString.call()这个方法封装的检测数据类型的工具。 但是浏览器搜索相关原理的好回答凤毛麟角&#xff0c;故而想记录一下&#xff0c;万一可以帮助到更多的新手呢&#xff1f;我的文章都是非常通俗易懂的&#xff0c;因为我写文章的时…

HTML页面知识点小总结(巨详细)

HTML基础知识点总结 文章目录HTML基础知识点总结一、 HTML页面主要的三大标签。二、 外部的CSS文件。三、外部的JavaScript文件。四、< body >标签中存放的内容。如果觉得写的不错的话点个赞支持鼓励一下吧&#xff0c;欢迎交流&#xff0c;谢谢啦~~~一、 HTML页面主要的…

前端知识点汇总

HTML介绍 HTML: Hyper Text Markup Language 超文本标记语言&#xff0c;用来做网页. 负责网页的框架结构布局.1993年 html 1.0 Tim Berners-Lee(蒂姆-博纳斯-李)&#xff0c;万维网之父1995年 html 2.0 IETF(互联网工程小组)1997年1月 html 3.2 W3C(万维网联盟)1997年12月 ht…

vue2:elementUI中Form 表单在特定情况下做动态rules添加删除

先看需求&#xff1a;&#xff08;不想看的直接拉到最后&#xff09; 【需求说明】 6、如状态为上架时&#xff0c;库存为必填&#xff0c;下架状态时&#xff0c;库存为可填&#xff0c;前面无星号 实现方法&#xff1a;使用this.$set()和this.$delete() 上代码&#xff1a;…

Vue2 + JSX使用总结

什么是JSX 摘自 React 官方&#xff1a; 它被称为 JSX&#xff0c;是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX&#xff0c;JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言&#xff0c;但它具有 JavaScript 的全部…

前端人必看的JS面试题汇总

面试是每一个前端人在求职过程中都需要面对的事情。在面试过程中&#xff0c;面试官没有办法通过实践操作去了解应聘者的技能水平&#xff0c;所以他们更多地会通过“八股文”的考察来判断你是否符合公司的招聘要求。所以作为一个前端人&#xff0c;在掌握好前端技能的同时&…

vue导出word

最近的项目中&#xff0c;需要把vue中的部分内容导出为word形式&#xff0c;之前没有做过这方面的&#xff0c;特记录&#xff0c;由于是初学&#xff0c;所以整理了此模板&#xff0c;注意&#xff1a;这是一个模板&#xff0c;并不是相关字段的解析&#xff0c;每个字段都是做…

ECharts柱状图关闭鼠标hover时的高亮样式

最近在做图表相关的需求&#xff0c;使用的是echarts来画图。 今天算是遇到一个比较坑的点了吧&#xff0c;就是两根柱状图重叠对比&#xff0c;设计图把某根柱状图的颜色设计得比较浅&#xff0c;因为echarts的柱状图本身hover到柱子上的时候&#xff0c;会有个高亮状态&…

JavaScript纯前端解析Excel文件

最近在开发时候遇到了这样的一个需求&#xff1a;需要在前端通过解析Excel将Excel中的值进行回传填入。我想在实际的开发过程中&#xff0c;肯定大家也会遇到这样的需求&#xff0c;在这介绍一个比较不错的JS工具库&#xff1a;js-xlsx&#xff0c;及该库的简单使用方法。 1、…

Three.js-设置环境纹理及加载hdr环境贴图

目录 1.hdr 2.环境纹理&#xff08;全景&#xff09; 3.CubeTextureLoader加载立方体环境纹理 4.RGBELoader环境纹理加载 1.hdr HDR全称High-Dynamic Range&#xff08;高动态光照渲染&#xff09;&#xff0c;通过HDR&#xff0c;显示器或相机可以很好的表现超出其亮度范围…

vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据,动态校验规则】

vue3 ant design vue项目实战——Form表单【v-model双向绑定数据实现form表单数据的提交】上期文章回顾【UI界面渲染】场景复现&#xff08;源代码附在文章最后&#xff09;实现需求1.表单数据及其类型的定义2.表单及各部分数据的双向绑定3.表单提交功能4.校验输入内容不为空5.…

vue-数据绑定

目录 1 数据绑定 2 绑定方式 2.1 单向绑定 2.2 双向绑定 1 数据绑定 Vue中有两种数据绑定方式&#xff1a; 1 单向绑定(v-bind)&#xff1a;数据只能从data流向页面。 2 双向绑定&#xff08;v-modle&#xff09;&#xff1a;数据不仅能从data流向页面&#xff0c;还能从页…

VSCode开发:使用nvm切换node版本

为什么要切换node版本&#xff0c;是因为npm run dev(vant app&#xff09;时&#xff0c;报了Error [ERR_REQUIRE_ESM]&#xff1a;Must use import to load ES Module这样的错。我使用的node版本是12.16.3&#xff0c;切换到16.15.1就没有这个问题了。 1. 安装nvm前记得要删…

【node进阶】深度解析express框架---编写接口|解决跨域问题

✅ 作者简介&#xff1a;一名普通本科大三的学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 &#x1f525; 系列专栏 &#xff1a; node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 &#x1f340; 学习格言: ☀️ 打不倒你的会使你更强&a…

Vuex 学习

什么是vuex&#xff1a; 专门在Vue中实现集中式状态&#xff08;数据&#xff09;管理的一个Vue插件&#xff0c;对vue应用中多个组件的共享状态进行集中式的管理&#xff08;读/写&#xff09;&#xff0c;也是一种组件间通信的方式&#xff0c;且适用于任意组件间通信。 原理…

clone下来的vue项目出现“An unknown git error occurred”,vue全局挂载axios及配置全局请求和响应拦截,uni-app的全局请求和响应拦截,对请求方法的封装

文章目录前言一、如何解决clone下来的vue项目出现“An unknown git error occurred”&#xff1f;二、vue全局挂载axios并设置全局的请求和响应拦截1.先下载安装好axios&#xff0c;这个就不用多说了2&#xff0c;vue2中的全局挂载:3,在vue3中我们又应该怎么全局挂载axios呢&am…

vue中使用百度地图

vue中使用百度地图 之前写过一篇vue调用百度地图的文章&#xff0c;但是写得不是很清晰&#xff0c;所以重新整理一篇&#xff1b;申请百度地图ak 这个我在之前的那篇文章已经讲过&#xff0c;就不再细说&#xff0c;链接如下&#xff1a;vue调用百度地图 初始化地图 引入地图…