HTML之<form><textarea>元素详解

简介: 一篇了解form和textarea元素

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”的表单-->

        image.gif


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

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

          属性值 描述
          on 默认值,开启自动完成功能。
          off 禁止启用自动完成功能
          <form action="form_action.asp" method="get" autocomplete="on" >

          image.gif


            • 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" >

            image.gif


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

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

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

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

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

              image.gif


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

                image.gif


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

                  image.gif


                    • 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>



                          • cols属性/rows属性:

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

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



                            • disabled属性:

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

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



                              • 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>
                              <!--位于表单之外的文本区域仍是表单的一部分-->




                                • maxlength属性:

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

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

                                image.gif



                                  • name属性:

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

                                  很常规不多说。下一位


                                    • placeholder属性:

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

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

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

                                    image.gif



                                      • readonly属性:

                                      设置文本区为只读。

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

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

                                      image.gif


                                        • required属性:

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

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

                                        image.gif


                                          • 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>


                                          目录
                                          相关文章
                                          |
                                          4月前
                                          |
                                          移动开发 开发者 UED
                                          HTML5 语义元素详解
                                          HTML5引入了诸多语义元素
                                          WK
                                          |
                                          4月前
                                          |
                                          存储 移动开发 前端开发
                                          HTML5新增了哪些其他元素和属性
                                          这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
                                          WK
                                          99 1
                                          |
                                          5月前
                                          |
                                          JavaScript 前端开发 容器
                                          用HTML DOM实现有条件地渲染网页元素(上)
                                          用HTML DOM实现有条件地渲染网页元素(上)
                                          |
                                          5月前
                                          |
                                          存储 JavaScript 前端开发
                                          用HTML DOM实现有条件地渲染网页元素(下)
                                          用HTML DOM实现有条件地渲染网页元素(下)
                                          |
                                          3月前
                                          |
                                          存储 移动开发 数据处理
                                          HTML5 元素2
                                          HTML5引入了多个新元素以增强表单功能和用户体验。`&lt;keygen&gt;`元素用于生成密钥对,提交表单时生成私钥和公钥,私钥保存在客户端,公钥发送至服务器,用于后续的身份验证。`&lt;output&gt;`元素则用于展示计算结果或其他脚本输出,如表单数据处理的结果。此外,`&lt;datalist&gt;`元素可与`&lt;input&gt;`元素结合使用,提供预定义的选项列表,增强输入的便捷性和准确性。这些元素共同提升了网页的交互性和安全性。
                                          |
                                          2月前
                                          |
                                          移动开发 前端开发 JavaScript
                                          HTML5 <nav> 元素2
                                          HTML5中的`&lt;nav&gt;`标签用于定义页面的导航链接部分,但并非所有链接都需置于其中。`&lt;aside&gt;`标签定义页面主内容外的相关信息,如侧边栏。`&lt;header&gt;`标签描述文档或节的头部区域,可用于定义内容的介绍展示区。示例包括导航、家庭旅行记录和IE9发布信息等。
                                          |
                                          3月前
                                          |
                                          移动开发 UED HTML5
                                          HTML5 表单元素1
                                          HTML5引入了新的表单元素,如`&lt;datalist&gt;`、`&lt;keygen&gt;`和`&lt;output&gt;`,以增强表单的功能性和用户体验。
                                          |
                                          2月前
                                          |
                                          Web App开发 移动开发 iOS开发
                                          HTML5 语义元素1
                                          HTML5引入了语义元素,如`&lt;nav&gt;`、`&lt;header&gt;`、`&lt;footer&gt;`等,这些元素能清晰地向浏览器和开发者传达其内容的意义,如导航链接、头部和尾部。与非语义元素(如`&lt;div&gt;`)不同,语义元素使网页结构更加明确,有助于提升可读性和可访问性。例如,`&lt;section&gt;`标签用于定义文档中的节,而`&lt;article&gt;`标签则用于定义独立的内容,如论坛帖子、博客文章等。这些新元素在IE9及更高版本、Firefox、Chrome、Safari和Opera中得到支持。
                                          HTML 元素
                                          HTML文档由HTML元素定义,元素包括开始标签、内容和结束标签。某些元素内容为空,可在开始标签中关闭。大多数元素可拥有属性,且元素间可相互嵌套,形成复杂结构。
                                          |
                                          5月前
                                          |
                                          移动开发 前端开发 HTML5
                                          Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)
                                          本文介绍了Twaver HTML5中的拓扑元素(Element),包括网元(Element)、节点(Node)和连线(Link)的基本概念和使用方法。文章详细解释了Element的属性和方法,并通过示例代码展示了如何在React组件中创建节点、设置节点属性和样式。
                                          106 1
                                          Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)

                                          热门文章

                                          最新文章