Forms

Girls riding the electric scooters

A web form, also known as an HTML form, on a website allows users to input data and then send it to a server for processing. The forms may resemble traditional paper or database forms, and users can input information using text fields, checkboxes, and so on.

And essential to guide users in filling out the form and utilizing each form control. Designate which inputs are required and which are optional, specify the data format required, and include any other relevant information.

Example


Code behind Example:
<div class="form-wrapper"> <h2>Requiered fields with placeholders</h2> <form method="post" action="link of the action"> <label for="field-2"> Field One<span class="form-label-required" >* (required)</span></label> <input type="text" id="field-1" name="placeholder-1" placeholder="Ex: Placeholder One" required/> <label for="field-2" >Field Two<span class="form-label-required" >* (required)</span></label> <input type="text" id="field-2" name="placeholder-2" placeholder="Ex: Placeholder Two" required/> <label for="field-3" >Field Two<span class="form-label-optional" >* (optional)</span ></label> <input type="text" id="field-3" name="placeholder-2" placeholder="Ex: Placeholder Three"/> <div class="form-wrapper-button"> <input type="submit" value="Submit" /> </div> </form> </div>

Html:

* { box-sizing: border-box; } .form-wrapper input[type="submit"] { color: #191b1a; background-color: #FE9C00; padding: 12px 20px; border: 0px; border-radius: 4px; cursor: pointer; } .form-wrapper input[type="submit"]:hover { background-color: #191b1a; color: #FE9C00; } /* =============== STRUCTURE =============== */ .form-wrapper input{ display: flex; flex-direction: column; } form-wrapper input:focus-visible { outline: 3px dashed #FE9C00; } .form-wrapper input, .form-wrapper select, .form-wrapper textarea { font-size: 1.6rem; } .form-wrapper input[type="text"], .form-wrapper select, .form-wrapper textarea { max-width: auto; width: 100%; padding: 12px; border: 0px; border-radius: 4px; margin-top: 6px; margin-bottom: 16px; resize: vertical; } .form-wrapper textarea { font-family: sans-serif; } .form-label-required { font-size: 1rem; color: #FE9C00; } .form-label-optional { font-size: 1rem; color: whitesmoke; } .form-wrapper h2 { color: whitesmoke; } .form-wrapper label { color: whitesmoke; } .form-wrapper { border-radius: 5px; background-color: #191b1a; max-width:max-content; padding: 20px; margin: 50px auto; } @media only screen and (min-width: 1024px) { .form-wrapper { max-width: 70%; } }

Css: