Currently, two things are on my mind...
First:
I'm attempting to set up a contact section with a few basic text input fields. One of these fields is meant for longer messages and should have multiple rows. The issue I'm facing is figuring out how to add these rows and restrict the number of characters per row.
Second:
How can I make these input fields clickable and editable? Once added to the website, they show as placeholders but do not allow me to click and type inside them (for example, to fill out a form)...
The code snippet is provided below, and I appreciate any assistance in expanding my knowledge on this topic...
.kontakt {
display: block;
padding-top: 10px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border: 3px solid #20202f;
border-radius: 10px;
position: absolute;
top: 50px;
left: 50px;
font-size: 24px;
background-color: rgba(51, 52, 89, 0.85);
}
#yourname {
font-size: 20px;
margin-bottom: 10px;
}
#mail {
font-size: 20px;
margin-bottom: 10px;
}
#message {
font-size: 20px;
margin-bottom: 25px;
}
.messagebutton {
width: 75px;
height: 35px;
font-size: 15px;
border-radius: 5px;
background-color: #bfbfff;
color: black;
margin-left: 172px;
margin-bottom: 5px;
}<div class="kontakt">
<div class="nametext">
<label for="ime">your name</label>
</div>
<div class="namebox">
<input type="text" id="yourname" placeholder="your name">
</div>
<div class="mailtext">
<label for="mail">e-mail</label>
</div>
<div class="mailbox">
<input type="email" id="mail" placeholder="your email">
</div>
<div class="messagetext">
<label for="Message">message</label>
</div>
<div class="messagebox">
<input type="text" id="message" placeholder="Your message goes here">
</div>
<button type="button" class="messagebutton">SEND</button>
</div>