Formular stylen | HTML + CSS Tutorial Deutsch

Показать описание

Mit dem Coupon-Code: KURZUNDKNAPP
sparst du 10% Rabatt auf alle Webhosting-Pakete mit einer Laufzeit von 12 Monaten und mehr.

Das Formular ist außerdem responsiv. Es kann also auf verschieden großen Anzeigebereichen ordentlich angezeigt werden. Das ist wichtig, um seine Webseite auch für Handy und Tablet Nutzer angenehm zu machen.

00:00 Endprodukt
00:30 HTML
01:00 Beginn CSS
01:44 Form
02:20 Überschrift
03:00 Eingabefelder
04:10 input:focus
04:58 Button
05:54 Responsive machen

Hintergrund Musik:

Erster Song:
Creative Commons — Attribution 3.0 Unported— CC BY 3.0

Zweiter Song:

Track: Ikson - All Night | Royalty Free Music
Music provided by Free Nation.

Рекомендации по теме

Комментарии

*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
height: 100%;
background: radial-gradient(#33383f, rgb(42, 47, 53));
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;

display: flex;
justify-content: center;
align-items: center;
}
form{
height: 575px;
width: 500px;
padding: 40px;
border-radius: 8px;
background-color: #222831;
box-shadow: 4px 4px 1px rgba(0, 0, 0, 0.404);

display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
h1{
color: white;
font-family: Tahoma, sans-serif;
font-size: 38px;

background-image: linear-gradient(to right, rgb(162, 0, 255), rgb(74, 15, 236));
background-size: 100% 4px;
background-position: bottom;
background-repeat: no-repeat;
line-height: 60px;
}
.inputs_container{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
input{
height: 64px;
width: 240px;
margin: 15px;
padding: 0px 25px;
border-radius: 10px;
border: none;
background-color: #373e49;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.212);
color: white;
font-size: 20px;
transition: 0.2s;
}
input:hover{
background-color: #47505f;
}
input:focus{
background-color: #47505f;
outline: none;
width: 265px;
}
input::placeholder{
color: rgb(159, 161, 190);
}
button{
height: 64px;
width: 140px;
border-radius: 1000px;
border: none;
color: white;
font-family: sans-serif;
font-size: 22px;
background: linear-gradient(to right, rgb(162, 0, 255), rgb(74, 15, 236));
transition: 0.2s;
}
button:hover{
width: 200px;
}
button:focus{
outline: none;
width: 200px;
}
@media(max-width: 650px){
form{
height: 100%;
width: 100%;
justify-content: center;
}
.inputs_container{
margin: 80px;
}
h1{
font-size: 32px;
}
}

coding-kurzundknapp

klare weiterempfehlung, lerne echt viel von dir!

bennzzen

Das einzig schlechte (für mich) war die Musik - hab ich einfach ausgeblendet. Aber alles andere war top: kein unnötiges Geschwafel, immer im Blick was welcher Befehl macht und nachdem ich geschaut habe, was auf deinem Kanal noch los ist habe ich mal ein (verdientes) Abo gesetzt.

wernerw.

Gutes Video!
Weshalb jedoch bricht bei 4:30 min der Ton komplett weg? Kamen da noch Erklärungen?

flex_fpv

Super Video. Hat es aber nur bei mir ab Minute 4 ca, wo es um den Focus ging, keinen Ton? 😅

kallyptrav

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registrieren</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form id="login_form">
<h1>Account Erstellen</h1>
<div class="inputs_container">
<input type="text" placeholder="Benutzername">
<input type="text" placeholder="Email">
<input type="password" placeholder="Passwort">
</div>
<button type="button" >Erstellen</button>
</form>

</body>
</html>

coding-kurzundknapp

Nices Video, könntest du die Codes auch in die Kommentare posten? Wäre echt hilfreich

santa-jn

Weiß jemand wenn ich eine sql datenbank habe wie ich dass so verbinden kann das die daten die du eingegeben hast sich automatisch in der daten bank speichert ps super video

philippstoon

Moin grüß dich, ich feier deine Videos!
Jedoch kriege ich dieses Formular nicht Responsive...
man kann immer etwas runter und nach rechts scrollen.
Habe sogar deinen Code in den Kommentaren kopiert um evtl. Fehler zu korregieren, jedoch ohne erfolg.

Mace

Wo bekommt man tolle Kontakt Formulare hier betrifft das eher die Grafik. Meine Frau will kein 0815 Kontaktformular.

marcodemarchio

ja, aber, wie wird versendet? woher weiss das Formular, an welche Adresse gesendet werden soll .... das ist mir immer noch ein Rätsel ...

Hl._Br._Steffen

Formular stylen | HTML + CSS Tutorial Deutsch

Formular stylen | HTML + CSS Tutorial Deutsch

Learn HTML forms in 8 minutes 📝

HTML Formulare

Formulare mit HTML und CSS Tutorial: Formular definieren – so geht's |video2brain.com

how to create html student registration form | html form

CSS Button Hover Effects | HTML | CSS | How to Design Glowing Button with Hover Effects

HTML Formulare - Alle Tags und Attribute erklärt! - HTML Tutorial für Anfänger 06 - Deutsch

28 | HOW TO CREATE & STYLE FORMS IN HTML | 2023 | Learn HTML and CSS Full Course for Beginners

html css & js poject #shortsfeed #shorts #coding #fullstack #programming #placement #project #j...

Modern login form made with only HTML & CSS - Transparent Login Form | #coding #webdevelopment #...

HTML Tutorial - Styling a form with CSS

HTML Input Types 🤯 HTML Input Cheatsheet 🎖️ #html #learnhtml

Responsive Webdesign: So werden Formulare mit HTML erstellt | Die Grundlagen

How To Create Registration Form Using HTML CSS & JavaScript

HTML Input Tags List Tutorial For Beginners (Web Development)

HTML - Formular-Elemente

Day 023 - 🤯 Css order button v2 design #coding #programming #cssanimation #webdevelopment #css #html...

HTML Formulare (5) Fieldset & Legend, HTML Tutorial deutsch Teil 48

Custom google forms for SEO boost? 🫢 #webdevelopment #customgoogleforms #css

HTML Formular mit JavaScript auslesen

html tutorial for beginners to learn html for beginners html tutorial for beginners

Power of CSS 🔥 | Html to css design #codingshortvideo #trading #csstutorial #viral #codinglover #js...

How To Build A Landing Page With HTML And CSS | HTML & CSS Landing Page

Formulare mit HTML erstellen | Die Grundlagen in 11 Minuten!