Einführung in HTML-Textfeldtypen

Zu den HTML-Textfeldtypen gehören einzeilige Textfelder, Passwort-Textfelder, Zahlentextfelder, Datumstextfelder, Zeittextfelder, Datei-Upload-Textfelder, mehrzeilige Textfelder usw. Ausführliche Einführung: 1. Das einzeilige Textfeld ist der gebräuchlichste Textfeldtyp, der zur Annahme einzeiliger Texteingaben verwendet wird. Der Benutzer kann einen beliebigen Text in das Textfeld eingeben, z. B. Benutzername, Passwort, E-Mail-Adresse. usw.; 2. Das Passwort-Textfeld wird verwendet, um die Passworteingabe zu akzeptieren. Wenn der Benutzer das Passwort eingibt, wird der Inhalt des Textfelds ausgeblendet, um die Privatsphäre des Benutzers zu schützen. 3. Numerisches Textfeld usw.

146

html 文本框 Nur lesen 文本

Einführung in HTML-Textfeldtypen

Welche Arten von HTML-Textfeldern gibt es?

Oct 12, 2023 pm 05:38 PM

html 文本框

So richten Sie ein HTML-Textfeld ein (Tutorial)

Ein HTML-Textfeld ist ein häufig verwendetes Formularelement, mit dem Benutzer Textinformationen auf Webseiten wie Registrierungsformularen, Message Boards usw. eingeben können. Wenn Sie wissen möchten, wie Sie ein HTML-Textfeld einrichten, finden Sie in diesem Artikel eine ausführliche Einführung und Bedienungsanleitung. Zunächst müssen wir die grundlegende Syntax und Eigenschaften von HTML-Textfeldern verstehen. In HTML können Textfelder mit dem folgenden Code erstellt werden: ```htmlApr 07, 2023 pm 04:56 PM

So machen Sie ein HTML-Textfeld schreibgeschützt

Dieses Mal zeige ich Ihnen, wie Sie einen schreibgeschützten Effekt in einem HTML-Textfeld erstellen und welche Vorsichtsmaßnahmen für den schreibgeschützten Effekt in einem HTML-Textfeld gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Jan 16, 2018 am 09:54 AM

html Nur lesen 文本

So legen Sie fest, dass ein HTML-Textfeld schreibgeschützt ist

In HTML kann die schreibgeschützte Funktion erreicht werden, indem das readonly-Attribut auf das Textfeldelement (input oder textarea) mit der Syntax „“ oder „</textarea“ gesetzt wird >".</p><span class="Articlelist_txts_time">May 14, 2021 pm 03:09 PM</span><div class="Articlelist_txts_infos"><a href="https://m.php.cn/de/search?word=html"><span class="Articlelist_txts_infoss on">html</span></a><a href="https://m.php.cn/de/search?word=nurlesen"><span class="Articlelist_txts_infoss ">Nur lesen</span></a><a href="https://m.php.cn/de/search?word=文本框"><span class="Articlelist_txts_infoss ">文本框</span></a></div></div></div><hr /><div class="Articlelist_txts"><a href="https://m.php.cn/de/faq/475927.html" title="So legen Sie die Größe des HTML-Textfelds fest" class="Articlelist_txtsimg"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/202105/12/2021051211294284487.jpg?x-oss-process=image/resize,m_fill,h_135,w_240" class="lazy" alt="So legen Sie die Größe des HTML-Textfelds fest" /></a><div class="Articlelist_txts_info"><h3><a href="https://m.php.cn/de/faq/475927.html" title="So legen Sie die Größe des HTML-Textfelds fest" class="Articlelist_txts_title">So legen Sie die Größe des HTML-Textfelds fest</a></h3><p class="Articlelist_txts_p">So legen Sie die Größe des HTML-Textfelds fest: Erstellen Sie zunächst eine neue HTML-Seite. Fügen Sie dann ein Beschriftungs-Tag und ein Eingabefeld hinzu. Ändern Sie schließlich die Breite, indem Sie das Größenattribut festlegen.</p><span class="Articlelist_txts_time">May 12, 2021 am 11:32 AM</span><div class="Articlelist_txts_infos"><a href="https://m.php.cn/de/search?word=html"><span class="Articlelist_txts_infoss on">html</span></a></div></div></div><hr /><div class="Articlelist_txts"><a href="https://m.php.cn/de/faq/476139.html" title="So legen Sie die Farbe des HTML-Textfelds fest" class="Articlelist_txtsimg"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/202105/14/2021051414471884980.jpg?x-oss-process=image/resize,m_fill,h_135,w_240" class="lazy" alt="So legen Sie die Farbe des HTML-Textfelds fest" /></a><div class="Articlelist_txts_info"><h3><a href="https://m.php.cn/de/faq/476139.html" title="So legen Sie die Farbe des HTML-Textfelds fest" class="Articlelist_txts_title">So legen Sie die Farbe des HTML-Textfelds fest</a></h3><p class="Articlelist_txts_p">Methode: 1. Verwenden Sie das Stilattribut, um den Stil „Rahmen: Breitenstilfarbe“ hinzuzufügen, um die Rahmenfarbe des Textfelds festzulegen. 2. Verwenden Sie das Stilattribut, um den Stil „Hintergrund: Farbe“ hinzuzufügen, um die Hintergrundfarbe festzulegen. 3. Verwenden Sie das Stilattribut, um „Farbe: Farbe“ hinzuzufügen. Der Stil legt die Textfarbe fest.</p><span class="Articlelist_txts_time">May 14, 2021 pm 02:54 PM</span><div class="Articlelist_txts_infos"><a href="https://m.php.cn/de/search?word=html"><span class="Articlelist_txts_infoss on">html</span></a></div></div></div><hr /></div><div class="AI_ToolDetails_main4sR"><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" src="/static/imghwm/hotarticle2.png" alt="" /><h2>Heißer Artikel</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/de/faq/618646.html" title="Welche Arten von HTML-Textfeldern gibt es?" class="phpgenera_Details_mainR4_bottom_title">Welche Arten von HTML-Textfeldern gibt es?</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>1 Jahre her</span><span>By小老鼠</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/de/faq/509611.html" title="So richten Sie ein HTML-Textfeld ein (Tutorial)" class="phpgenera_Details_mainR4_bottom_title">So richten Sie ein HTML-Textfeld ein (Tutorial)</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>2 Jahre her</span><span>ByPHPz</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/de/faq/476143.html" title="So legen Sie fest, dass ein HTML-Textfeld schreibgeschützt ist" class="phpgenera_Details_mainR4_bottom_title">So legen Sie fest, dass ein HTML-Textfeld schreibgeschützt ist</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 Jahre her</span><span>By青灯夜游</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/de/faq/476139.html" title="So legen Sie die Farbe des HTML-Textfelds fest" class="phpgenera_Details_mainR4_bottom_title">So legen Sie die Farbe des HTML-Textfelds fest</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 Jahre her</span><span>By青灯夜游</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/de/faq/475927.html" title="So legen Sie die Größe des HTML-Textfelds fest" class="phpgenera_Details_mainR4_bottom_title">So legen Sie die Größe des HTML-Textfelds fest</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 Jahre her</span><span>By藏色散人</span></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/de/article.html">Mehr anzeigen</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/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" src="/static/imghwm/hottools2.png" alt="" /><h2>Heiße Werkzeuge</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/de/ai/kits-ai" title="Kits AI" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173417754263702.jpg?x-oss-process=image/resize,m_fill,h_45,w_45" class="lazy" alt="Kits AI" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/de/ai/kits-ai" title="Kits AI" class="phpmain_tab2_mids_title"><h3>Kits AI</h3></a><p>Verwandeln Sie Ihre Stimme mit KI-Künstlerstimmen. Erstellen und trainieren Sie Ihr eigenes KI-Sprachmodell.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/de/ai/soundraw-ai-music-generator" title="SOUNDRAW - AI Music Generator" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173417756684210.jpeg?x-oss-process=image/resize,m_fill,h_45,w_45" class="lazy" alt="SOUNDRAW - AI Music Generator" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/de/ai/soundraw-ai-music-generator" title="SOUNDRAW - AI Music Generator" class="phpmain_tab2_mids_title"><h3>SOUNDRAW - AI Music Generator</h3></a><p>Erstellen Sie ganz einfach Musik für Videos, Filme und mehr mit dem KI-Musikgenerator von SOUNDRAW.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/de/ai/web-chatgptai" title="Web ChatGPT.ai" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173399378227633.jpg?x-oss-process=image/resize,m_fill,h_45,w_45" class="lazy" alt="Web ChatGPT.ai" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/de/ai/web-chatgptai" title="Web ChatGPT.ai" class="phpmain_tab2_mids_title"><h3>Web ChatGPT.ai</h3></a><p>Kostenlose Chrome -Erweiterung mit OpenAI -Chatbot für ein effizientes Surfen.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/de/ai/agnaistic" title="Agnaistic" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/ai_manual/001/246/273/174390322883190.jpg?x-oss-process=image/resize,m_fill,h_45,w_45" class="lazy" alt="Agnaistic" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/de/ai/agnaistic" title="Agnaistic" class="phpmain_tab2_mids_title"><h3>Agnaistic</h3></a><p>Plattform für Charakterverwaltung und Chat -Interaktionen.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/de/ai/aha" title="Aha" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/ai_manual/001/246/273/174390320455134.jpg?x-oss-process=image/resize,m_fill,h_45,w_45" class="lazy" alt="Aha" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/de/ai/aha" title="Aha" class="phpmain_tab2_mids_title"><h3>Aha</h3></a><p>AI -Plattform für Influencer -Marketing mit 24/7 -Unterstützung.</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/de/ai">Mehr anzeigen</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/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" src="/static/imghwm/hotarticle2.png" alt="" /><h2>Heiße Themen</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/de/faq/tpldwzzmxg" title="So ändern Sie den Text im Bild" class="phpgenera_Details_mainR4_bottom_title">So ändern Sie den Text im Bild</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/eyess.png" alt="" /><span>1569</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/tiezi.png" alt="" /><span>8</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/de/faq/xdatadata" title="Der Unterschied zwischen xdata und data" class="phpgenera_Details_mainR4_bottom_title">Der Unterschied zwischen xdata und data</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/eyess.png" alt="" /><span>178</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/tiezi.png" alt="" /><span>4</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/de/faq/headmldyf" title="Verwendung von Head-Befehlen" class="phpgenera_Details_mainR4_bottom_title">Verwendung von Head-Befehlen</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/eyess.png" alt="" /><span>127</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/tiezi.png" alt="" /><span>3</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/de/faq/javazzbds" title="Java-Syntax für reguläre Ausdrücke" class="phpgenera_Details_mainR4_bottom_title">Java-Syntax für reguläre Ausdrücke</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/eyess.png" alt="" /><span>191</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/tiezi.png" alt="" /><span>9</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/de/faq/javasxdockerr" title="So implementieren Sie die Docker-Container-Technologie in Java" class="phpgenera_Details_mainR4_bottom_title">So implementieren Sie die Docker-Container-Technologie in Java</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/eyess.png" alt="" /><span>187</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img src="/static/imghwm/tiezi.png" alt="" /><span>10</span></div></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/de/faq/zt">Mehr anzeigen</a></div></div></div></div></main><footer><div class="footer footermedit"><div class="footertop"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" src="/static/imghwm/logo.png" alt="" /><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="" title="">About us</a><a href="" title="">Disclaimer</a><a href="" title="">Sitemap</a></div><div class="footerbottom"><p>© php.cn All rights reserved</p></div></div></footer><script> // 通用函数，用于显示或隐藏元素 function toggleElementsDisplay(className, show) { const elements = document.getElementsByClassName(className); for (let i = 0; i < elements.length; i++) { elements[i].style.display = show ? "block" : "none"; } } // 绑定事件监听器 function bindEventListeners() { const toggleDisplay = (className, show, eventId) => { document.getElementById(eventId).addEventListener("click", (event) => { event.preventDefault(); toggleElementsDisplay(className, show); }); }; toggleDisplay("m_editormain12main", true, "fixed_tab_img"); toggleDisplay("m_editormain12main", false, "fixed_tab_topi"); toggleDisplay("m_editormain12main", false, "fixed_tab_close"); // 控制 m_menu 的显示和隐藏 toggleDisplay("m_menu", true, "lan1sp"); toggleDisplay("m_menu", false, "m_editormain12main_topi_sp"); // 控制 m_menu_lang 的显示和隐藏 toggleDisplay("m_menu_lang", true, "lan1"); toggleDisplay("m_menu_lang", false, "m_editormain12main_topi_lan"); } // 在页面加载完成后绑定事件监听器 window.onload = bindEventListeners; 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"); }, }, }); }); // 获取关闭按钮 const closeButton = document.querySelector(".phpgenera_Details_mainR1_close"); // 获取容器元素 const container = document.querySelector(".phpgenera_Details_mainR1"); // 添加点击事件监听器 closeButton.addEventListener("click", (event) => { event.preventDefault(); // 阻止默认的<a>点击行为 container.style.display = "none"; // 隐藏容器 }); document.addEventListener("DOMContentLoaded", () => { // 动态获取所有滚动链接及隐藏目标元素 const links = [{ linkId: "fixed_tab_a1", targetId: "Topic_Details_mainL2_R_title1", hideElementId: "fixed_tab_titlelist", // 要隐藏的元素 ID }, { linkId: "fixed_tab_a2", targetId: "Topic_Details_mainL2_R_title2", hideElementId: "fixed_tab_titlelist", // 要隐藏的元素 ID }, { linkId: "fixed_tab_a3", targetId: "Topic_Details_mainL2_R_title3", hideElementId: "fixed_tab_titlelist", // 要隐藏的元素 ID }, ]; links.forEach(({ linkId, targetId, hideElementId }) => { const linkElement = document.getElementById(linkId); const targetElement = document.getElementById(targetId); const hideElement = document.getElementById(hideElementId); if (linkElement && targetElement) { linkElement.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认行为 // 隐藏指定元素 if (hideElement) { hideElement.style.display = "none"; } // 平滑滚动到目标元素 targetElement.scrollIntoView({ behavior: "smooth" }); }); } else { console.warn( `Link, target, or hide element not found: ${linkId}, ${targetId}, ${hideElementId}` ); } }); }); </script></body></html>