0
現在、私は最初のウェブサイトをコーディングしています。私は現在、ホームページに統合したいコンタクトフォームを作成しています。1行につき2つの入力を取得し、提出の幅を変更します
私は、2つの名前と2つの電子メール入力を並べて（2つのコースの間に少しの呼吸スペースを置いて）、テキスト領域を2つのボックスに渡って同じ幅にします。私はまた、送信ボタンを右側のメッセージボックスの下にするようにしています。
また、テキストエリアにプレースホルダを追加できません。私がそうするとき、テキストは本当に面白く見え、他の入力とは違います。誰かが私にそれを手伝ってもらえれば、本当に感謝します。
私は多くのことを試しましたが、何も私のために働くようです。ここで誰かが私が試したことのない方法を知っていることを期待していました。
私が話していることをさらに理解するために、みんなが見ていくために私のコードを以下に追加しました。
.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>
あなたが学習のためにこれを行っていない場合は、[https://getbootstrap.com/]物事を非常に簡単に作ることができた – gvmani
私はのようなコードを習得しようとしています使用してみてくださいフォームの場合は
– TheChasers