TextArea Tag in HTML-HTML Tutorial-php.cn

Table of Contents

How <textarea> Tag work in HTML?

Attributes

Examples of TextArea Tags in HTML

Example #4

Conclusion

Home

Web Front-end

HTML Tutorial

TextArea Tag in HTML

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:29 PM

html html5 HTML Tutorial HTML Properties HTML tags

The tag is one of the many HTML tags. The <textarea> tag format is divided into three main parts, an opening tag (<textarea>), the content, and the closing tag (). Users can input text over multiple lines by using the HTML tag in a form to create a text area. A tag creates a text area that can hold a lot of characters.</p> <h3 id="How-lt-textarea-gt-Tag-work-in-HTML">How <textarea> Tag work in HTML?</h3> <p>A textarea element creates an area or space specified using attributes like cols, rows, or both. CSS styling and height and width properties can format the look and feel.</p> <p><strong>Syntax:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><textarea rows="3" cols="20"> Enter your text here... </textarea></pre><div class="contentsignin">Copy after login</div></div> <h3 id="Attributes">Attributes</h3> <p>The <textarea> tag, like all other HTML tags, accepts a number of other attributes, which are also common in <input> form element. They are listed below:</p> <ul> <li> <strong>autofocus</strong>: The autofocus attribute ensures that the text area automatically gets the focus when the page loads.</li> <li> <strong>cols</strong>: The ‘cols’ attribute specifies the text area’s width. The value should be a positive integer. If not specified, the default value of ‘cols’ is 20.</li> <li> <strong>disabled</strong>: This feature disables the text area, freezes it, and does not accept user input changes. Disabling the text area will cause the tab key to skip it.</li> <li> <strong>form</strong>: The ‘form’ attribute specifies the form id to which the text area belongs.</li> <li> <strong>name</strong>: It assigns a name to the text control.</li> <li> <strong>placeholder</strong>: This attribute helps the user by providing a hint or a sample text that guides what should be written in the text box.</li> <li> <strong>readonly</strong>: This attribute sets the text area in read-only mode; that is, it is not affected by the user’s input or cannot change its content.</li> <li> <strong>wrap</strong>: This feature specifies how the text area will wrap the text. If not specified, the default value is ‘soft.’</li> </ul> <h3 id="Examples-of-TextArea-Tags-in-HTML">Examples of TextArea Tags in HTML</h3> <p>To understand the work of text area element more, check out the following example that has <textarea> tag in action,</p> <h4 id="Example">Example #1</h4> <p><strong>Code:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><form> <p>Leave your Comment:</p> <br /> <textarea id="ta" cols="60" rows="5"> Write Here...</textarea></form></pre><div class="contentsignin">Copy after login</div></div> <p><strong>Output:</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543856757259.jpg" class="lazy" alt="TextArea Tag in HTML" ></p> <p>The above example is simple, demonstrating features of <textarea> element. For example, the ‘id’ attribute is for accessibility purposes. Another interesting feature used in this example is the cols and rows attributes.</p> <p>The rows and cols allow the programmer to set the boundary values for the size of the text area, the exact space the text area will acquire. Using these attributes helps in cross-browser support and format consistency since browser defaults can be different.</p> <h4 id="Example">Example #2</h4> <p><strong>Code:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title> Textarea HTML Tag Demo </title> </head> <body> <form> <p>Fill the Detail:</p> <br /> <textarea rows="5" cols="40" name="demo" maxlength="60" minlength="10" required="required">Enter your name</textarea> <br /> <input type="submit" name="Submit" value="Submit" /> </form> </body> </html></pre><div class="contentsignin">Copy after login</div></div> <p><strong>Output:</strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543856928836.jpg" class="lazy" alt="TextArea Tag in HTML" ></p> <p>The above example shows another set of properties used alongside <textarea> tag, max length, and minlength. The maxlength specifies the maximum number of characters a user can enter in the text area. So here, the user can enter ’60’ characters, special characters included.</p> <p>The max length attribute was added in HTML5; HTML did not support this attribute. The text area requires a minimum of 10 characters as set by the ‘minlength’ property. The ‘required’ attribute indicates that the user must not leave the text area blank to be considered valid and submitted. It’s a simple validation for the tag.</p> <h4 id="Example">Example #3</h4> <p><strong>Code:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><form id="Form1"> <label>Textarea Box 1</label> <br /> <textarea rows="5" cols="40" name="demo" maxlength="60" minlength="10" disabled="disabled"> This is Disabled</textarea> <br /> <label>Textarea Box 2</label> <br /> <textarea rows="5" cols="40" required="required"></textarea> <br /> <label>Textarea Box 3</label> <br /> <textarea rows="5" cols="40" placeholder="This is readonly textarea" readonly="readonly"></textarea> <br /> <input type="submit" name="Submit" value="Submit" /> </form></pre><div class="contentsignin">Copy after login</div></div> <p><strong>Output:</strong></p> <p>Observe that the ‘Textarea Box 2’ text area is a required text area, whereas the ‘Textarea Box 1’ is disabled.</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543857055297.jpg" class="lazy" alt="TextArea Tag in HTML" ></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543857237912.jpg" class="lazy" alt="TextArea Tag in HTML" ></p> <h4 id="Example">Example #4</h4> <p><strong>Code:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><form id="label2" action="textareaDemo.html"> <fieldset> <legend><b>Form 2</b></legend> <input type="text" name="FN" value="Name" /> <br /> <input type="submit" name="Submit" value="Submit" /> <br /> </fieldset> </form> <textarea rows="5" cols="40" form="label2" required="required"></textarea> <br /> <p>Above Text Area belongs to 'Form 2'</p></pre><div class="contentsignin">Copy after login</div></div> <p><strong>Output:</strong></p> <p>Note the output below. The textarea box below is a ‘required’ field, and as mentioned in the code above, this field is associated with the form ‘Form 2’. Thus when we try to submit the form with an empty text area, it shows an alert.</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543857522484.jpg" class="lazy" alt="TextArea Tag in HTML" ></p> <h3 id="Conclusion">Conclusion</h3> <p>The <textarea> element can be a nested element within a <form> tag or can exist outside a form tag but use the ‘form’ attribute to associate itself with a form. One important note is this element does not have a ‘value’ attribute, so if you need a default text for your text area, enter that text between the opening and the closing <textarea> tags.</p><p>The above is the detailed content of TextArea Tag in HTML. For more information, please follow other related articles on the PHP Chinese website!</p> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">Statement of this Website</div> <div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>  <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Hot AI Tools</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>AI-powered app for creating realistic nude photos</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>Online AI tool for removing clothes from photos.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>Undress images for free</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI clothes remover</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ai">Show More</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Hot Article</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796789525.html" title="What's New in Windows 11 KB5054979 & How to Fix Update Issues" class="phpgenera_Details_mainR4_bottom_title">What's New in Windows 11 KB5054979 & How to Fix Update Issues</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796793874.html" title="How to fix KB5055523 fails to install in Windows 11?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055523 fails to install in Windows 11?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796793871.html" title="How to fix KB5055518 fails to install in Windows 10?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055518 fails to install in Windows 10?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796792155.html" title="Strength Levels for Every Enemy & Monster in R.E.P.O." class="phpgenera_Details_mainR4_bottom_title">Strength Levels for Every Enemy & Monster in R.E.P.O.</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796794243.html" title="Blue Prince: How To Get To The Basement" class="phpgenera_Details_mainR4_bottom_title">Blue Prince: How To Get To The Basement</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/article.html">Show More</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Hot Tools</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title"> <h3>Notepad++7.3.1</h3> </a> <p>Easy-to-use and free code editor</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Chinese version" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Chinese version</h3> </a> <p>Chinese version, very easy to use</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Zend Studio 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title"> <h3>Zend Studio 13.0.1</h3> </a> <p>Powerful PHP integrated development environment</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>Visual web development tools</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac version" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac version</h3> </a> <p>God-level code editing software (SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ai">Show More</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Hot Topics</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7938</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>15</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1652</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>14</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1412</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1303</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>25</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1250</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>29</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/faq/zt">Show More</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796600245.html" title="Table Border in HTML" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416492486715.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Table Border in HTML" /> </a> <a href="https://www.php.cn/faq/1796600245.html" title="Table Border in HTML" class="phphistorical_Version2_mids_title">Table Border in HTML</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:49 PM</span> <p class="Articlelist_txts_p">Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796600244.html" title="Nested Table in HTML" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416491283996.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Nested Table in HTML" /> </a> <a href="https://www.php.cn/faq/1796600244.html" title="Nested Table in HTML" class="phphistorical_Version2_mids_title">Nested Table in HTML</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:49 PM</span> <p class="Articlelist_txts_p">This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796600238.html" title="HTML margin-left" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416482056439.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML margin-left" /> </a> <a href="https://www.php.cn/faq/1796600238.html" title="HTML margin-left" class="phphistorical_Version2_mids_title">HTML margin-left</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:48 PM</span> <p class="Articlelist_txts_p">Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796600271.html" title="HTML Table Layout" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416543391948.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML Table Layout" /> </a> <a href="https://www.php.cn/faq/1796600271.html" title="HTML Table Layout" class="phphistorical_Version2_mids_title">HTML Table Layout</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:54 PM</span> <p class="Articlelist_txts_p">Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796600269.html" title="HTML Input Placeholder" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416542577781.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML Input Placeholder" /> </a> <a href="https://www.php.cn/faq/1796600269.html" title="HTML Input Placeholder" class="phphistorical_Version2_mids_title">HTML Input Placeholder</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:54 PM</span> <p class="Articlelist_txts_p">Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796600210.html" title="HTML Ordered List" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416432927533.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML Ordered List" /> </a> <a href="https://www.php.cn/faq/1796600210.html" title="HTML Ordered List" class="phphistorical_Version2_mids_title">HTML Ordered List</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:43 PM</span> <p class="Articlelist_txts_p">Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796600246.html" title="HTML onclick Button" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416493797970.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML onclick Button" /> </a> <a href="https://www.php.cn/faq/1796600246.html" title="HTML onclick Button" class="phphistorical_Version2_mids_title">HTML onclick Button</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:49 PM</span> <p class="Articlelist_txts_p">Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796600227.html" title="Moving Text in HTML" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416455153019.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Moving Text in HTML" /> </a> <a href="https://www.php.cn/faq/1796600227.html" title="Moving Text in HTML" class="phphistorical_Version2_mids_title">Moving Text in HTML</a> <span class="Articlelist_txts_time">Sep 04, 2024 pm 04:45 PM</span> <p class="Articlelist_txts_p">Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.</p> </div> </div> <a href="https://www.php.cn/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Public welfare online PHP training，Help PHP learners grow quickly！</p> </div> <div class="footermid"> <a href="https://www.php.cn/about/us.html">About us</a> <a href="https://www.php.cn/about/disclaimer.html">Disclaimer</a> <a href="https://www.php.cn/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1746252509"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时，取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则，保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> <script> document.addEventListener('DOMContentLoaded', function() { const mainNav = document.querySelector('.Article_Details_main1Lmain'); const header = document.querySelector('header'); if (mainNav) { window.addEventListener('scroll', function() { const scrollPosition = window.scrollY; if (scrollPosition > 84) { mainNav.classList.add('fixed'); } else { mainNav.classList.remove('fixed'); } }); } }); </script> </body> </html>