How do write and style HTML in a better way?

Question

What's a reasonable strategy for solving this problem that meets the understanding level of a novice coder?

Here's what I've tried so far for a writing a simple form: 1) write the html in its entirety 2) style it 3) try to change the html to suit the style methods I'm trying to apply

It doesn't work because I get confused about how I should structure the html hierarchy to suit the design parameters I have on paper.

Here's where I am: https://codepen.io/tapzx2/pen/wvMgGGY

<div class="baby-form">
<h2>Class Signup</h2>
<form action="#" method="post">
  <ul>
    <li>
      <input type="text" name="first-name" id="first-name">
      <label for="first-name">First Name</label>
    </li>
    <li>
      <input type="text" name="last-name" id="last-name">
      <label for="last-name">Last Name</label>
    </li>
    <li>
      <input type="email" name="email" id="email">
      <label for"email">Email</label>
    </li>
    <li>
      <button type="submit">Register</button>
    </li>
  </ul>
</form>

Here's where I'd like to go: https://codepen.io/tapzx2/pen/qBbqxjX

<div class="content-container">
  <h2>Class Signup</h2>
  <div class="form-container">
    <form>
      <div class="question-container">
        <div class="question">
          <label for="first">First Name</label>
          <input type="text" id="first" name="first">
        </div>
        <div class="question">
          <label for="last">Last Name</label>
          <input type="text" id="last" name="last">
        </div>
        <div class="question">
          <label for="email">Email Address</label>
          <input type="email" id="email" name="email">
        </div>
      </div>
      <button type="submit">Register</button>
    </form>
  </div>
</div>

Answer 1

I struggled with this for a long time too. My CSS never had the effect that I wanted it to. Practice is key, but I find that when beginning, it is easier to take a "general-to-specific" or approach and style as you go.

Once you are comfortable with CSS, you can do all the HTML before you start styling. In the meantime, I recommend you style with each layer (see below).

For example, if I wanted to build what you've given as your end result I would do something like...

1. Create a wrapper that will contain all content, because everything will be centered. Set the width, display, etc. for the wrapper.
2. Inside the wrapper, add a <form>. Style the form if needed.
3. Inside the form, add a <header>, and inside the header, add an <h_> tag. The header isn't necessary, but it makes it easier to add other elements to the top of the form in the future.
4. Inside the form, create a <fieldset> followed by a button. Style the button. You can put the button in a footer if you want.
5. Inside the fieldset, create 3 input wrappers. Each will contain a label and an input. Style the wrappers.
6. Add the labels and inputs inside each wrapper. Style these and style the fieldset if needed.

I like to work downwards in layers, don't start working on new child elements until the layer is complete. I started with the "general" elements (ex. the main wrapper) and worked towards the "specifics" (ex. the labels, inputs, buttons). As you style each layer, be conscious of what will be in the next. Eventually you'll get the feel of what elements you need to have in place so that you can style properly.

Answer 2

this way:

see JS Code : there is only one const (myForm) needed for access every form elements.

Form elements necessarily need a name attribute (used on the submission), and their use is easy to match in JS to identify each element of the form

const myForm = document.getElementById('my-form')

myForm.onsubmit=e=>
  {
  e.preventDefault()

  console.log(  'first-name = ', myForm['first-name'].value )
  console.log(  'last-name = ', myForm['last-name'].value )
  console.log(  'email = ', myForm.email.value )
  }

#my-form {
  width: 14em;
  margin: 1em auto;
}
fieldset {
  border: 1px solid lightblue;
  padding: 1em .6em 0em .6em;
}
label {
  display: block;
  float: left;
  clear: both;
  min-width: 12em;
  margin-bottom: 1em
}
button {
  margin-top: 1em;
  float: right;
}

<form action="#" method="post" id="my-form">
  <fieldset>
    <legend>Class Signup</legend>
    <label>
      First Name
      <input type="text" name="first-name" >
    </label>
    <label>
      Last Name 
      <input type="text" name="last-name" >
    </label>
    <label>
      Email Address
      <input type="text" name="email" >
    </label>
  </fieldset>
  <button type="submit">Register</button>
</form>