Required output:

Current output:

Demo:

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

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

<section >

  <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" >Send</button>
  </form>
</section>

CodePudding user response：

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 >
  <h2 >Form</h2>
  <label >
    <span >Name</span>
    <input type="text" >
  </label>
  <label >
    <span >Email</span>
    <input type="text" >
  </label>
  <button >Send</button>
</form>

CodePudding user response：

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>