Ich schreibe gerade meine erste Website, bisher läuft alles gut, bis ich ein Hindernis erreiche. Ich erstelle derzeit mein Kontaktformular, das ich in die Homepage integrieren möchte.Erhalte zwei Eingaben pro Zeile und ändere die Sendebreite
Ich möchte die 2x Name und 2x E-Mail-Eingänge nebeneinander (mit ein wenig Spielraum zwischen den beiden natürlich) und dem Textbereich die gleiche Breite über die beiden Boxen sein. Ich versuche auch, den Send-Button unter dem Nachrichtenfeld auf der rechten Seite erscheinen zu lassen.
Außerdem kann ich keinen Platzhalter auf dem Textfeld hinzufügen. Wenn ich das tue, sieht der Text wirklich lustig aus und nicht wie die anderen Eingaben. Wenn mir auch jemand dabei helfen könnte, wird es sehr geschätzt.
Ich habe viele Dinge ausprobiert, aber nichts scheint für mich zu funktionieren. Ich hatte gehofft, dass jemand hier vielleicht eine Methode kennen würde, die ich nicht versucht habe.
Ich habe meinen Code unten für jeden hinzugefügt, um zu sehen, um weiter zu verstehen, worüber ich spreche.
.section4 {
background: whitesmoke;
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}
.contact-wrap {
max-width: 75vw;
}
.form-text {
font-family: Oswald;
font-weight: 700;
text-transform: uppercase;
text-align: center;
}
.contact,
input,
textarea,
button {
display: grid;
grid-template-columns: 1fr 1fr;
margin: .5vh .5vw;
}
.contact-full {
grid-column: 1/3;
}
.contact,
input,
textarea,
button {
width: 100%;
padding: 1.5vh;
}
button {
font-family: Oswald;
font-weight: 700;
text-transform: uppercase;
position: static;
font-size: 2.5vh;
background: transparent;
border: 10px solid transparent;
border-image: #c71d6f;
border-image: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
border-image: -moz-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
border-image: -webkit-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
border-image-slice: 1;
}
button:hover {
color: #f4f4f4;
background: #c71d6f;
background: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
background: -moz-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
background: -webkit-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:500,600,700" rel="stylesheet">
</head>
<body>
<div class="section4">
<form>
<h2 class="form-text">let's work together!</h2>
<div class="contact-wrap">
<div class="contact">
<input type="name" id="name" placeholder="Name" required>
<input type="name" id="company" placeholder="Company">
<input type="email" id="email" placeholder="Email" required>
<input type="tel" id="telephone" placeholder="Contact">
<textarea class="contact-full" name="message" rows="10"></textarea>
<button class="button">Send</button>
</div>
</div>
</form>
</div>
</body>
</html>
Wenn Sie nicht diese sind für das Lernen zu tun, versuchen Sie es mit [https://getbootstrap.com/], die Dinge viel einfacher machen kann – gvmani
Ich versuche, einen ähnlichen Code zu lernen
für Formulare – TheChasers