DEV Community

Cover image for HTML→ The riddles of the sphinx
Manu Martinez
Manu Martinez

Posted on

HTML→ The riddles of the sphinx

Hello friends! Today we are going to talk about forms, yes! because data is also collected through the web, but this is not the only way, and we will see it in another post...

A web form basically works and looks similar to a form like the one made by telephone companies, or any other, which spend hours and hours calling to offer you their services. 😒😓

The web form is composed of one or more control elements (sometimes called widgets), plus some additional elements that help to structure the overall form; they can be single or multi-line text fields, drop-down boxes, buttons, checkboxes or radio buttons, and they are mainly created with the element.

How do we create a form? Pay attention, don't get lost!

  • We create the form with the tag.
<form>
......
</form>
Enter fullscreen mode Exit fullscreen mode
  • We add the "control" elements.
<label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br>
Enter fullscreen mode Exit fullscreen mode
  • A button to "validate" (submit)
<input type="submit" value="Submit">
Enter fullscreen mode Exit fullscreen mode
  • and that's it! The form is ready.
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br>
  <input type="submit" value="Submit">
</form> 
Enter fullscreen mode Exit fullscreen mode

formulariomanu.jpg

A validation button is nothing more than a form element that allows data to be sent to the server for processing.

There are many more elements, and attributes to create more complete and complex forms but I'll reserve that for the PDF I'm making for you plus a cheatsheet!

Thanks for reading the post, that's all for today! and remember to always be the best version of you! 🤩

Top comments (0)