Heim Web-Frontend Front-End-Fragen und Antworten Welche Eigenschaften hat das HTML/CSS-Texteingabefeld?

Welche Eigenschaften hat das HTML/CSS-Texteingabefeld?

Sep 23, 2022 pm 02:41 PM
css html

Die Attribute des Texteingabefelds sind: 1. Akzeptieren, das den durch den Datei-Upload übermittelten Dateityp angibt; 2. Alt, das den alternativen Text für die Bildeingabe definiert; 4 . formaction, die angibt, wann das Formular die Eingabesteuerung beim Absenden verarbeitet. 5. formtarget, das angibt, wo der Name oder das Schlüsselwort der empfangenen Antwort nach dem Absenden des Formulars angezeigt werden soll sichtbare Breite im Textbereich; 7. schreibgeschützt, was dem schreibgeschützten Zustand entspricht.

Welche Eigenschaften hat das HTML/CSS-Texteingabefeld?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In HTML/CSS gibt es zwei Arten von Texteingabefeldern:

  • input: einzeiliges Texteingabefeld

  • textarea: mehrzeiliges Texteingabefeld

Lassen Sie uns über diese beiden Eingaben sprechen Von der Box unterstützte Eigenschaften.

Attribute des Eingabefelds

<input> gibt das Eingabefeld an, in das der Benutzer Daten eingeben kann.

Beispiele für neue Typattributwerte in HTML5
Eigenschaft Wert Beschreibung
Akzeptieren Audio/* Video/* image/*MIME_type Gibt den Typ der per Datei-Upload übermittelten Datei an. (nur für type="file")
align left Rechts Spitze Mitte unten HTML5 ist veraltet und veraltet. Gibt die Ausrichtung der Bildeingabe an. (Nur für type="image")
alt text Definieren Sie den Alternativtext für die Bildeingabe. (nur für type="image")
Autovervollständigung ein Das Attribut „off autocomplete“ gibt an, ob für das Eingabefeld des <input>-Elements die automatische Vervollständigung aktiviert sein soll. Das Attribut
Autofokus Autofokus gibt an, dass das <input>-Element automatisch den Fokus erhalten soll, wenn die Seite geladen wird. Das Attribut
checked checked checked gibt das <input>-Element an, das beim Laden der Seite vorab ausgewählt werden soll. (Nur für type="checkbox" oder type="radio") Das Attribut
disabled disabled disabled gibt an, welche <input>-Elemente deaktiviert werden sollen. Das Attribut
form form_id form gibt ein oder mehrere Formulare an, zu denen das <input>-Element gehört. Die Eigenschaft
formaction URL gibt die URL der Datei an, die die Eingabesteuerung beim Absenden des Formulars verarbeitet. (Nur für type="submit" und type="image")
formenctype application/x-www-form-urlencoded Multipart-/Formulardaten Das Attribut text/plain gibt an, wie Formulardaten codiert werden, wenn sie an den Server übermittelt werden (nur geeignet für type="submit" und type="image").
formmethod get post definiert die HTTP-Methode, die Formulardaten an die Aktions-URL sendet. (Nur geeignet für type="submit" und type="image") Das Attribut
formnovalidate formnovalidate formnovalidate überschreibt das novalidate-Attribut des
-Elements.
formtarget _blank _selbst _Elternteil _topframename gibt an, wo der Name oder das Schlüsselwort der nach dem Absenden des Formulars erhaltenen Antwort angezeigt werden soll. (Nur geeignet für type="submit" und type="image")
height pixels Gibt die Höhe des <input>-Elements an. (Nur für type="image") Das Attribut
list datalist_id bezieht sich auf das Element , das die vordefinierten Optionen für das Element <input> enthält.
max Anzahl Das date -Attribut gibt den Maximalwert des <input>-Elements an. Das Attribut
maxlength number gibt die maximal zulässige Anzahl von Zeichen in einem <input>-Element an.
min Anzahl Das date -Attribut gibt den Mindestwert des <input>-Elements an. Das Attribut
multiple multiple gibt an, dass der Benutzer mehrere Werte in das <input>-Element eingeben darf.
Name Text Das Namensattribut gibt den Namen des <input>-Elements an. Das Attribut
pattern regexp pattern gibt den regulären Ausdruck an, der zur Validierung des Werts des <input>-Elements verwendet wird. Das Attribut
Platzhalter Text Platzhalter gibt einen kurzen Tooltip an, der den erwarteten Wert des Eingabefelds beschreibt .
readonly readonly Das readonly-Attribut gibt an, dass das Eingabefeld schreibgeschützt ist. Das Attribut
required required gibt an, dass die Eingabefelder vor dem Absenden des Formulars ausgefüllt werden müssen. Das Attribut
size number size gibt die sichtbare Breite des <input>-Elements an. Das Attribut
src URL src gibt die URL des Bildes an, das als Senden-Schaltfläche angezeigt wird. (nur für type="image")
step number step-Attribut gibt die zulässigen Zahlenintervalle für das <input>-Element an.
Typ Schaltfläche
Kontrollkästchen
Farbe
Datum
DatumUhrzeit
DatumUhrzeit-Lokal
E-Mail
Datei
versteckt
Bild
Monat
Nummer
Passwort
Das Attribut radio
range
reset
search
submit
tel
text
time
url
week
type gibt den Typ des anzuzeigenden <input>-Elements an.
value text Gibt den Wert des <input>-Elements an. Das Attribut „width“ gibt die Breite des <input>-Elements an. (Nur für type="image") Das Attribut type gibt den Typ des anzuzeigenden <input>-Elements an. Der Standardtyp ist: Text.
Farbe

Wenn Sie darauf klicken, wird eine Farbauswahl angezeigt. Sie können eine beliebige Farbe auswählen

Eingabebereich Nummern innerhalb des Bereichs können manuell eingegeben, aber nicht übermittelt werden

  • tel

    Geben Sie eine Telefonnummer ein, nur Safari unterstützt dies

Welche Eigenschaften hat das HTML/CSS-Texteingabefeld?E-Mail

Es verfügt über eine integrierte Erkennungsfunktion , wird erkannt, ob es das @-Symbol und @ enthält. Gibt es Zeichen vor und nach dem Zeichen? haben Zeichen danach, sonst kann es nicht übermittelt werden

  • Suche

    Definition Textfeld zur Eingabe der Suchzeichenfolge

Welche Eigenschaften hat das HTML/CSS-Texteingabefeld?

Datumskontrolle – Datum


  • <input>
    Nach dem Login kopieren
    Nach dem Login kopieren
    Nach dem Login kopieren
  • Zeitkontrolle – Uhrzeit


    🔜 rreee
  • Wochenkontrolle- Woche

Welche Eigenschaften hat das HTML/CSS-Texteingabefeld?

<input>
<input>
Nach dem Login kopieren
  • Datum/Uhrzeit-Steuerung – datetime


  • <input>
    Nach dem Login kopieren
    Nach dem Login kopieren
    Nach dem Login kopieren
    Hinweis: Die Datums- und Uhrzeitsteuerung unterstützt auch Min- und Max-Attribute, die die minimale und maximale Zeit angeben, die eingestellt werden kann


<input>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
  • Attribute des Textarea-Eingabefelds
  • Welche Eigenschaften hat das HTML/CSS-Texteingabefeld?

    • Attribut
    Wert

    Welche Eigenschaften hat das HTML/CSS-Texteingabefeld? Beschreibung

    2-Welche Eigenschaften hat das HTML/CSS-Texteingabefeld?

    Autofokus
    • Autofokus

      gibt an, dass beim Laden der Seite der Textbereich automatisch den Fokus erhält.

    Welche Eigenschaften hat das HTML/CSS-Texteingabefeld?cols

    • number

    • Gibt die sichtbare Breite innerhalb des Textbereichs an.

    Welche Eigenschaften hat das HTML/CSS-Texteingabefeld?

    disabled
    • disabled

      gibt an, dass der Textbereich deaktiviert ist.

    Welche Eigenschaften hat das HTML/CSS-Texteingabefeld?form

    • form_id

    • Definieren Sie ein oder mehrere Formulare, zu denen der Textbereich gehört.

    Welche Eigenschaften hat das HTML/CSS-Texteingabefeld?

    maxlength

    numberWelche Eigenschaften hat das HTML/CSS-Texteingabefeld?

    Gibt die maximal zulässige Anzahl von Zeichen im Textbereich an. Name

    TextGibt den Namen des Textbereichs an. PlatzhalterTextGibt einen kurzen Hinweis an, der den erwarteten Eingabewert des Textbereichs beschreibt. readonlyreadonly gibt an, dass der Textbereich schreibgeschützt ist. erforderlicherforderlich Gibt an, dass der Textbereich erforderlich/erforderlich ist. rowsnumberGibt die Anzahl der im Textbereich sichtbaren Zeilen an. wickelnhart soft
    gibt an, wie der Text im Textbereich umbrochen werden soll, wenn das Formular gesendet wird.

    textarea文本区域中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。

    可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小,不过更好的办法是使用 CSS 的 height 和 width 属性。

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    </head>
    <body>
    
    <textarea rows="10" cols="30">
    我是一个文本框。
    </textarea>
    
    </body>
    </html>
    Nach dem Login kopieren

    Welche Eigenschaften hat das HTML/CSS-Texteingabefeld?

    (学习视频分享:web前端

    Das obige ist der detaillierte Inhalt vonWelche Eigenschaften hat das HTML/CSS-Texteingabefeld?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    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

    Heiße KI -Werkzeuge

    Undresser.AI Undress

    Undresser.AI Undress

    KI-gestützte App zum Erstellen realistischer Aktfotos

    AI Clothes Remover

    AI Clothes Remover

    Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

    Undress AI Tool

    Undress AI Tool

    Ausziehbilder kostenlos

    Clothoff.io

    Clothoff.io

    KI-Kleiderentferner

    AI Hentai Generator

    AI Hentai Generator

    Erstellen Sie kostenlos Ai Hentai.

    Heißer Artikel

    R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
    1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Beste grafische Einstellungen
    1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
    Will R.E.P.O. Crossplay haben?
    1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

    Heiße Werkzeuge

    Notepad++7.3.1

    Notepad++7.3.1

    Einfach zu bedienender und kostenloser Code-Editor

    SublimeText3 chinesische Version

    SublimeText3 chinesische Version

    Chinesische Version, sehr einfach zu bedienen

    Senden Sie Studio 13.0.1

    Senden Sie Studio 13.0.1

    Leistungsstarke integrierte PHP-Entwicklungsumgebung

    Dreamweaver CS6

    Dreamweaver CS6

    Visuelle Webentwicklungstools

    SublimeText3 Mac-Version

    SublimeText3 Mac-Version

    Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

    So verwenden Sie Bootstrap in Vue So verwenden Sie Bootstrap in Vue Apr 07, 2025 pm 11:33 PM

    Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.

    Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Apr 08, 2025 pm 07:05 PM

    HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

    So schreiben Sie geteilte Zeilen auf Bootstrap So schreiben Sie geteilte Zeilen auf Bootstrap Apr 07, 2025 pm 03:12 PM

    Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.

    So ändern Sie Bootstrap So ändern Sie Bootstrap Apr 07, 2025 pm 03:18 PM

    Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.

    So richten Sie das Framework für Bootstrap ein So richten Sie das Framework für Bootstrap ein Apr 07, 2025 pm 03:27 PM

    Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.

    So fügen Sie Bilder auf Bootstrap ein So fügen Sie Bilder auf Bootstrap ein Apr 07, 2025 pm 03:30 PM

    Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.

    HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch Apr 12, 2025 am 12:02 AM

    WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

    Reacts Rolle bei HTML: Verbesserung der Benutzererfahrung Reacts Rolle bei HTML: Verbesserung der Benutzererfahrung Apr 09, 2025 am 12:11 AM

    React kombiniert JSX und HTML, um die Benutzererfahrung zu verbessern. 1) JSX bettet HTML ein, um die Entwicklung intuitiver zu gestalten. 2) Der virtuelle DOM -Mechanismus optimiert die Leistung und reduziert den DOM -Betrieb. 3) Komponentenbasierte Verwaltungs-Benutzeroberfläche zur Verbesserung der Wartbarkeit. 4) Staatsmanagement und Ereignisverarbeitung verbessern die Interaktivität.

    See all articles