Formatting form design in HTML and CSS

Question

Required output:

Current output:

Demo:

.Form {
  background-color: rgb(198, 187, 197);
}

h2,
h3 {
  color: rgb(67, 37, 70)
}

<section class="Form">

  <h2>Form</h2>
  <h3>Name</h3>
  <form action="#">
    <input type="text" placeholder="Your Name">
    <h3>E-mail</h3>
    <input type="email" placeholder="Your-mail">
    <div>
      <textarea name="text" cols="30" rows="10" placeholder="Your massage"></textarea>
    </div>
    <button type="submit" class="btn">Send</button>
  </form>
</section>

don't use h1-h6(headlines) for anything else that an actual title/headline. What you looking for is a label! Semantics are important for accessibility reasons and have an influence on your SEO rating. — tacoshy
– tacoshy, Commented Oct 28, 2022 at 17:45
You need to be specific about what you need. I will start with reading about padding and margin if I were you. — m4n0
– m4n0, Commented Oct 28, 2022 at 17:46

disinfor · Accepted Answer · 2022-10-28 18:04:31Z

Try the following markup:

body {
  margin: 0;
}

.my-form {
  background-color: rgb(230, 214, 210);
  color: rgb(0, 0, 0);
  padding: 16px;
}

.my-form__title {
  margin-top: 0;
}

.my-form__label {
  margin-top: 12px;
  display: block;
}

.my-form__label_title {
  display: block;
  font-weight: 600;
}

.my-form__input {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgb(67, 37, 70);
}

.my-form__button {
  background-color: rgb(64, 50, 63);
  color: rgb(255, 255, 255);
  width: 181px;
  padding: 20px;
  margin-top: 12px;
}

<form class="my-form">
  <h2 class="my-form__title">Form</h2>
  <label class="my-form__label">
    <span class="my-form__label_title">Name</span>
    <input type="text" class="my-form__input">
  </label>
  <label class="my-form__label">
    <span class="my-form__label_title">Email</span>
    <input type="text" class="my-form__input">
  </label>
  <button class="my-form__button">Send</button>
</form>

tacoshy · Accepted Answer · 2022-10-28 18:04:38Z

You should sue the correct semantic tags for accessibility reasons!

Simply remove the default styles of the inputs and textarea. Then add the underline with a border-bottom.

For more details see the inline comments in CSS:

/* removes the default fieldset styling */
fieldset { 
  border: none;
  padding: 0;
}

/* gives the legend the same font-size and weight as the h2 tag */
legend {
  font-size: 1.5em;
  font-weight: bold;
}

/* gives the underline to a label and input */
fieldset > div {
  border-bottom: 1px solid black;
  width: 50%;
  padding: 0.5em 0;
}

/* gives the label the same font-size and weight as the h3 tag */
label {
  font-size: 1.17em;
  font-weight: bold;
}

/* removed the default style of the input and textarea */
input:not([type="submit"]),
textarea {
  border: none;
  background: transparent;
}

/* removes the default style of a textarea */
textarea {
  resize: none;
  border-bottom: 1px solid black;
  width: 100%;
}

<form>
  <fieldset>
    <legend>Form</legend>
    
    <div>
      <label for="name">Name</label><input type="text" id="name" placeholder="Your Name">
    </div>
    
    <div>
      <label for="email">Email</label><input type="email" id="email" placeholder="Your Email">
    </div>
    
    <textarea></textarea>
    
    <input type="submit">

  </fieldset>
</form>

Collectives™ on Stack Overflow

Formatting form design in HTML and CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related