• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Eingabefelder im Formular

Saskia411

Neues Mitglied
Hallo ihr Lieben,

ich versuche nun seit Ewigkeiten ein Formular für eine Hausarbeit zu erstellen und bekomme es einfach nicht hin..

Ich muss ein Formular erstellen mit verschiedenen Eingabefelder..
Das Eingabefeld der Matrikelnummer soll auf 7 Zahlen begrenzt sein.. mit type=number kann ich nicht die maxlength eingeben und bei type=text funktioniert das bei Pattern auch nicht...

Zweiteres soll das beim Laden der Seite fokussierte Eingabefeld einen blauen Rahmen haben.. bei mir behält es nur den schwarzen..

ich wäre über jede Hilfe sehr dankbar!!

<style>
#input:focus {border-color:blue;}
</style>

<form action="" method="post" name="form1" id="form1" >


<h1>Klausuranmeldung</h1>


<main>
<form id="form1">

<label for="Vorname">Vorname:* </label>
<input autofocus type="text" name="Vorname" id="Vorname" required>

<label for="Name">Name:*</label>
<input type="text" name="Name" id="Name" required>

<hr>
<label for="Matrikelnummer">Matrikelnummer:*
<input type="number" name="Matrikelnummer" id="Matrikelnummer"
pattern=^[0-9]{7}$" required>
</label>
<br>
<label for="Telefonnummer">Telefonnummer:*
<input type="number" name="Telefonnummer" id="Telefonnummer" required>

</label>
<br>
<label for="E-Mail-Adressse">E-Mail-Adresse:*
<input type="email" name="E-Mail-Adresse" id="E-Mail-Adresse" placeholder=[email protected] required>
</label>
<br>
<label for="Geburtsdatum">Geburtsdatum:*
<input type="date" placeholder="TT.MM.JJJJ" name="Geburtsdatum" id="Geburtsdatum" required>
</label>
<br>
<label for="Studiengang">Studiengang:*
<name="Studiengang" id="Studiengang" required>
<select>
<option> Wirtschaftsinformatik </option>
<option> Wirtschaftswissenschaften </option>
</select>
</label>
<br>
<label for="Klausurenauswahl">Klausuren:*
<input type="text" name="Klausurenauswahl" id="Klausurenauswahl" required>
</label>
<p>
<button form="form1" type="reset">Eingaben zurücksenden</button>
<button form="form1" type="submit">Eingaben absenden</button>
</p>
</main>
 

Sempervivum

Senior HTML'ler
Hallo Saskia411 und willkommen im Forum!

Du hast zwei öffnende form-Tags aber kein schließendes. Lösche das erste und füge das schließende unten ein.

bei type=text funktioniert das bei Pattern auch nicht
Das Pattern selbst passt aber Du hast das öffnende Gänsefüßchen vergessen.

Zweiteres soll das beim Laden der Seite fokussierte Eingabefeld einen blauen Rahmen haben
Dass das nicht funktioniert liegt daran, dass der Selektor in deinem CSS nicht stimmt. Da "input" ein Tag ist und keine ID ist das # fehl am Platze.
Es gibt noch eine andere Schwierigkeit dabei: Es gibt eine Eigenschaft "outline" die per Default im Focus einen schwarzen Rahmen erzeugt und dieser überschreibt "border". Du musst "outline" explizit auf "none" setzen damit "border"greift.
 
Zuletzt bearbeitet:

ThomasF

Neues Mitglied
Da fehlen auch "Gänsefüßchen" und das hier
HTML:
<name="Studiengang" id="Studiengang" required>
<select>
gehört sicher in eine Zeile
Code:
<select name="Studiengang" id="Studiengang" required>
<option> Wirtschaftsinformatik </option>
<option> Wirtschaftswissenschaften </option>
</select>
 
Werbung:
Oben