Formulargestaltung

Hallo, Das Formular soll folgendermaßen aussehen: - 2 Felder nebeneinander, 2 untereinander (bereits gemacht) - die Felder sollen ausgerichtet sein (genau untereinander stehen) - die Beschriftungen sollen über den Feldern stehen Wie mach ich's?

Der hier verwendete Code

<!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, shrink-to-fit=no"> <title>Test</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } body { height: 100vh; width: 100%; display: flex; border: 2px solid black; flex-direction: column; align-content: center; justify-content: space-evenly; align-items: center; } form{ border:2px solid black; height:300px; display:flex; justify-contents:center; max-width:500px; flex-wrap:wrap; align-content: space-around; } label{ display:flex; flex-direction:column; width:50%; border:1px solid blue; text-align:center; max-height:100px; } input { padding: 3px 3px; margin:5px auto; font-size: 1.1rem; width:90%; justify-contents:center; max-width:200px; } @media only screen and (max-width: 400px) { form { flex-direction: column; display: flex; width:99%; justify-content: space-around; } form label{ width:90%; } } </style> </head> <body> <form class="myForm"> <label for="label1">Text1 <input type="number"> </label> <label for="label2">TextText2 <input type="number"> </label> <label for="label3">TextTextText3 <input type="number"> </label> <label for="label4">TextTextText4 <input type="number"> </label> </form> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!