Heim > Web-Frontend > HTML-Tutorial > HTML-Artikel: So implementieren Sie den Eingabefeldeffekt in Webseiten (detaillierte Codeerklärung)

HTML-Artikel: So implementieren Sie den Eingabefeldeffekt in Webseiten (detaillierte Codeerklärung)

奋力向前
Freigeben: 2021-08-17 17:06:00
Original
18501 Leute haben es durchsucht
<p>Im vorherigen Artikel „Lernen Sie Schritt für Schritt, wie man geordnete und ungeordnete Listen zu HTML-Text hinzufügt (detaillierte Code-Erklärung) “ habe ich Ihnen gezeigt, wie Sie mit HTML geordnete und ungeordnete Listen zu Text hinzufügen. Im folgenden Artikel erfahren Sie, wie Sie den Eingabefeldeffekt in HTML-Webseiten implementieren. Sehen wir uns gemeinsam an, wie das geht.

<p>HTML-Artikel: So implementieren Sie den Eingabefeldeffekt in Webseiten (detaillierte Codeerklärung)

<p><input> Tag-Spezifikation: Sammeln Sie Benutzerinformationen und Eingabefelder in vielen Formen, wie zum Beispiel: Textfelder, Kontrollkästchen, Optionsfelder usw. <code><input> 标签指定:搜集用户信息并且输入字段很多种形式,比如:文本字段、复选框、单选按钮、等等。

添加输入框的方法

<p><input type="">这个type是告诉它是个什么类型,比如txt文本类型,就是这个默认的一个类型,给大家通过代码示例看看是什么样呢?

<p>代码示例

<body>
<input type="text">
</body>
Nach dem Login kopieren
<p>代码效果

<p>HTML-Artikel: So implementieren Sie den Eingabefeldeffekt in Webseiten (detaillierte Codeerklärung)

<p>代码结束出来,相信大家这个都也挺眼熟的,这就是一个输入框,咱前面可以再加上一行字用<p>来试一试。

<p>代码示例

<body>
<p>用户名:</p>
<input type="text">
</body>
Nach dem Login kopieren
<p>代码效果

<p>HTML-Artikel: So implementieren Sie den Eingabefeldeffekt in Webseiten (detaillierte Codeerklärung)

<p>能看到用户名,但是用户名后边就会有什么,添加密码,我们为了这个稍微看的舒坦一点,用<div>把它弄成一行。

<p>代码示例

<body>
<div>
用户名:
<input type="text">
</div> 
</body>
Nach dem Login kopieren
<p>代码效果

<p>HTML-Artikel: So implementieren Sie den Eingabefeldeffekt in Webseiten (detaillierte Codeerklärung)

<p>结束出来就差不多是这么一个状态然后这里边是不是还有密码

<p>代码示例

<body>
<div>
用户名:
<input type="text">
</div> 
<div>
密码:
<input type="text">
</div> 
</body>
Nach dem Login kopieren
<p>代码效果

<p>HTML-Artikel: So implementieren Sie den Eingabefeldeffekt in Webseiten (detaillierte Codeerklärung)

<p>有一点不合适了,因为大家能看到这密码,正常来说密码是看不见。使用password实现密码效果。

<p>代码示例

密码:
<input type="password">
Nach dem Login kopieren
<p>代码效果

<p>HTML-Artikel: So implementieren Sie den Eingabefeldeffekt in Webseiten (detaillierte Codeerklärung)

<p>密码就是差不多这么一个状态,这个网页中比较常见的一种东西。接下来复选框怎么实现呢?可以使用checkbox来实现

<p>代码示例

<div>
1选项
<input type="checkbox">
2选项
<input type="checkbox">
3选项
<input type="checkbox">
</div>
Nach dem Login kopieren
<p>代码效果

<p>HTML-Artikel: So implementieren Sie den Eingabefeldeffekt in Webseiten (detaillierte Codeerklärung)

<p>这是复选框,接下来咱们稍微说一下单选框,这个网上比较见常用的,它都是用咱们这个,input是可以做到,使用radio

So fügen Sie ein Eingabefeld hinzu

<input type="">Dieser Typ gibt an, um welchen Typ es sich handelt, z. B. den TXT-Texttyp, der der Standardtyp ist , lassen Sie mich Ihnen ein Codebeispiel geben, um zu sehen, wie es aussieht? <p>Codebeispiel

<p>
单选:
<input type="radio">
Nach dem Login kopieren
Codeeffekt

<p>HTML-Artikel: So implementieren Sie den Eingabefeldeffekt in Webseiten (detaillierte Codeerklärung)

1. gif" alt="HTML-Artikel: So implementieren Sie den Eingabefeldeffekt in Webseiten (detaillierte Codeerklärung)"/><p>

<p>Der Code endet. Ich glaube, das kennt jeder. Dies ist ein Eingabefeld. Wir können davor eine Textzeile hinzufügen, indem wir <p>< /code> verwenden. Probieren wir es mal aus.

Codebeispiel<p>
<div>
<input type="color">
</div>
Nach dem Login kopieren

Codeeffekt<p>HTML-Artikel: So implementieren Sie den Eingabefeldeffekt in Webseiten (detaillierte Codeerklärung) 77. jpg" alt="WeChat Screenshot_20210817164111.jpg"/>

<p>Sie können den Benutzernamen sehen, aber hinter dem Benutzernamen steht etwas. Fügen Sie einen hinzu Um dies einfacher zu erkennen, verwenden wir Make it a line.

<p>

Code sample<p>rrreee

Code effect🎜🎜🎜WeChat Screenshot_20210817164305.jpg🎜🎜Wenn es endet, wird es fast in diesem Zustand sein. Gibt es hier dann ein Passwort? img src="https://img.php.cn/upload/image /208/930/774/1629189997710553.jpg" title="1629189997710553.jpg" alt="HTML-Artikel: So implementieren Sie den Eingabefeldeffekt in Webseiten (detaillierte Codeerklärung)"/>🎜🎜🎜 Das ist etwas unangemessen, weil jeder das Passwort sehen kann, aber normalerweise ist das Passwort unsichtbar. Verwenden Sie password, um Passworteffekte zu erzielen. 🎜🎜🎜Code sample🎜🎜rrree🎜🎜code effekt🎜🎜🎜 WeChat Screenshot_20210817164649.jpg🎜🎜Das Passwort befindet sich fast in diesem Zustand, was auf dieser Webseite relativ häufig vorkommt. Wie wird das Kontrollkästchen als nächstes implementiert? Sie können checkbox verwenden, um 🎜🎜🎜Codebeispiele🎜🎜rrreee🎜🎜Codeeffekte🎜🎜🎜🎜WeChat Screenshot_20210817164920.jpg🎜🎜Dies ist ein Kontrollkästchen. Als nächstes sprechen wir über das Optionsfeld, das online häufiger verwendet wird. , Dies kann mithilfe unserer Eingabe erfolgen, indem radio zum Implementieren von Optionsfeldern verwendet wird. 🎜🎜🎜Codebeispiel🎜🎜rrreee🎜🎜Codeeffekt🎜🎜🎜🎜🎜🎜Neben diesem Radio ist auch Farbe eine relativ wichtige Sache. 🎜🎜🎜Codebeispiel🎜🎜rrreee🎜🎜Codeeffekt🎜🎜🎜🎜🎜🎜🎜🎜🎜Wie Sie sehen, ist das etwas, es ist ein bisschen interessant, es kann die Farbe direkt ändern. 🎜🎜ok, fertig! 🎜🎜Empfohlenes Lernen: 🎜Html-Video-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonHTML-Artikel: So implementieren Sie den Eingabefeldeffekt in Webseiten (detaillierte Codeerklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage