Es ist 2019 und frühere Antworten auf dieses Problem werden nicht verwendet
- CSS-Raster
- CSS-Variablen
- HTML5-Formularelemente
- SVG in CSS
Das CSS-Raster ist die Möglichkeit, Formulare im Jahr 2019 zu erstellen, da Ihre Beschriftungen Ihren Eingaben vorausgehen können, ohne dass zusätzliche Divs, Bereiche, Bereiche mit Sternchen und andere Relikte vorhanden sind.
Hier ist, wohin wir mit minimalem CSS gehen:
Der HTML-Code für die oben genannten:
<form action="https://www.example.com/register/" method="post" id="form-validate" enctype="multipart/form-data">
<p class="form-instructions">Please enter the following information to create your account.</p>
<label for="firstname">First name</label>
<input type="text" id="firstname" name="firstname" value="" title="First name" maxlength="255" required="">
<label for="lastname">Last name</label>
<input type="text" id="lastname" name="lastname" value="" title="Last name" maxlength="255" required="">
<label for="email_address">Email address</label>
<input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="email_address" value="" title="Email address" size="30" required="">
<label for="password">Password</label>
<input type="password" name="password" id="password" title="Password" required="">
<label for="confirmation">Confirm password</label>
<input type="password" name="confirmation" title="Confirm password" id="confirmation" required="">
<input type="checkbox" name="is_subscribed" title="Subscribe to our newsletter" value="1" id="is_subscribed" class="checkbox">
<label for="is_subscribed">Subscribe to the newsletter</label>
<input type="checkbox" name="persistent_remember_me" id="remember_meGCJiRe0GbJ" checked="checked" title="Remember me">
<label for="remember_meGCJiRe0GbJ">Remember me</label>
<p class="required">* Required</p>
<button type="submit" title="Register">Register</button>
</form>
Platzhaltertext kann ebenfalls hinzugefügt werden und wird dringend empfohlen. (Ich beantworte nur diese Zwischenform).
Nun zu den CSS-Variablen:
--icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -6 16 16"> \
<line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(15)"></line> \
<line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(75)"></line> \
<line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(-45)"></line> \
</svg>');
--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
<path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');
Das CSS für die Formularelemente:
input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required] {
background-image: var(--icon-required);
background-position-x: right;
background-repeat: no-repeat;
background-size: contain;
}
input:valid {
--icon-required: var(--icon-tick);
}
Das Formular selbst sollte sich im CSS-Raster befinden:
form {
align-items: center;
display: grid;
grid-gap: var(--form-grid-gap);
grid-template-columns: var(--form-grid-template-columns);
margin: auto;
}
Die Werte für die Spalten können auf 1fr autooder 1frmit <p>Tags festgelegt werden, die auf 1 / -1 festgelegt sind. Sie ändern die Variablen in Ihren Medienabfragen so, dass die Eingabefelder auf Mobilgeräten und wie oben auf dem Desktop in voller Breite angezeigt werden. Sie können Ihre Rasterlücke auch auf Mobilgeräten ändern, wenn Sie dies mit dem CSS-Variablenansatz wünschen.
Wenn die Kästchen gültig sind, sollten Sie anstelle des Sterns ein grünes Häkchen erhalten.
Die SVG in CSS ist eine Möglichkeit, den Browser vor einem Roundtrip zum Server zu bewahren, um ein Bild des Sternchens zu erhalten. Auf diese Weise können Sie die Sternchen fein einstellen. Die Beispiele hier befinden sich in einem ungewöhnlichen Winkel. Sie können dies herausarbeiten, da das SVG-Symbol oben vollständig lesbar ist. Das Ansichtsfeld kann auch geändert werden, um das Sternchen über oder unter der Mitte zu platzieren.
