Cacher is the code snippet organizer for pro developers

A

element is responsible for collecting info to send somewhere else. The HTTP request instructs the receiving computer how to handle the incoming information. We need to supply the element with both the location of where the 's information goes and what HTTP request to make. The element can also contain child elements like paragraphs, headings.

If we want to create an input field we need to use an element.

• It has a type attribute which determines how it renders on the web page and what kind of data it can accept. If type = text: renders a text field that users can type into.
• Name attribute, without this the info won't be sent when the form is submitted. After users type into the element, the value of the value attribute becomes what is typed into the text field. The value of the value attribute is paired with the value of the name attribute and sent as text when the form is submitted

For a user to properly identify an we use the appropriately named element. The label displays text that is written between the opening & closing tags. To associate a label & input, the input needs an id attribute. We then assign the for attribute of the label element with the value of the id attribute of input. If you click the label element, the corresponding input is highlighted.

-type attribute="password" will replace input text with another character. When the form is submitted, the value of the text is sent. -type attribute="number", so we can restrict what users type into the input field to just numbers & special characters. We can also provide a step attribute which creates arrows inside the niput field to increase/decrease by the value of the step attribute.

• type attribute="range", limits what numbers our users could type. Range creates a slider, where we can set min/max values. Smaller step values make the slider more fluidly.
• type="checkbox", allow to select out of multiple options provided. You have to make the labels for the checkboxes! Each input can have the same value for the name attribute. This groups the inputs together. However, each input has a unique id to pair with a label.
• type="radio", when we present multiple options but only allow for 1 selection. Also here you have to make the labels yourself. Assign them the same name to group them.

Dropdown list, use a select element, and add multiple option elements with a value attribute to it. It is the value of the value attribute that is used in the form submission. The datalist is used with an input type="Text element. The input creates a text field that users can type into and filter options from the datalist. The input has a list attribute.

-When we need to write more info, w use textarea, instead of input. We can add attributes rows and cols.

Submit form - the role of the submit button. Using type="submit"

------------------------ Form Validation --------------------------

Validation is the concept of checking user provided data against the required data. -server-side validation, this happens when data is sent to another machine (typically a server) for validation. The form on the login page accepts username and password input, then sends the data to a server which checks that the pair matches up correctly. -client-side validation if we want to check the data on the browser (the client). This validation occurs before data is sent to the server. It saves us time from having to send info to the server and wait for the server to respond.

To enforce that a user has to provide info before we can submit, we can add the required attribute to an input element. We can also assign a min or max value for a number field. with min max. We can set a min number of characters for a text field, using minlength & maxlength. We can validate how text was provided using pattern attribute, and assign it regex (regular expression).

<form action="/example.html" method="POST"> //action determines where the info is sent. 
</form>

<form action="/example.html" method="POST">
  <input type="text" name="first-text-field"> <!-- if the name is omitted, the info will not be submitted -->
</form>

<!-- e.g. if we fill in important details in the box  "first-text-field=important details" is 
send to /example.html, and the value of value is important details -->

<form action="/example.html" method="POST">
  <input type="text" name="first-text-field" value="already pre-filled"> <!-- prefilled text field-->
</form>
<!-- label element -->
<form action="/example.html" method="POST">
  <label for="meal">What do you want to eat?</label>
  <br>
  <input type="text" name="food" id="meal">
</form>

<!-- slider -->
<form>
  <label for="volume"> Volume Control</label>
  <input id="volume" name="volume" type="range" min="0" max="100" step="1">
</form>

<!-- checkbox -->
<form>
  <p>Choose your pizza toppings:</p>
  <label for="cheese">Extra cheese</label>
  <input id="cheese" name="topping" type="checkbox" value="cheese">
  <br>
  <label for="pepperoni">Pepperoni</label>
  <input id="pepperoni" name="topping" type="checkbox" value="pepperoni">
  <br>
  <label for="anchovy">Anchovy</label>
  <input id="anchovy" name="topping" type="checkbox" value="anchovy">
</form>

<!-- radio -->
<form>
  <p>What is sum of 1 + 1?</p>
  <input type="radio" id="two" name="answer" value="2">
  <label for="two">2</label>
  <br>
  <input type="radio" id="eleven" name="answer" value="11">
  <label for="eleven">11</label>
</form>

<!-- dropdown list -->
<form>
  <label for="lunch">What's for lunch?</label>
  <select id="lunch" name="lunch">
    <option value="pizza">Pizza</option>
    <option value="curry">Curry</option>
    <option value="salad">Salad</option>
    <option value="ramen">Ramen</option>
    <option value="tacos">Tacos</option>
  </select>
</form>

<!-- datalist -->
<form>
  <label for="city">Ideal city to visit?</label>
  <input type="text" list="cities" id="city" name="city">

  <datalist id="cities">
    <option value="New York City"></option>
    <option value="Tokyo"></option>
    <option value="Barcelona"></option>
    <option value="Mexico City"></option>
    <option value="Melbourne"></option>
    <option value="Other"></option>  
  </datalist>
</form>

<!-- textarea -->
<form>
  <label for="blog">New Blog Post: </label>
  <br>
  <textarea id="blog" name="blog" rows="5" cols="30">
  </textarea>
</form>

<!-- regex -->
<form action="/example.html" method="POST">
  <label for="payment">Credit Card Number (no spaces):</label>
  <br>
  <input id="payment" name="payment" type="text" required pattern="[0-9]{14,16}"> <!-- a 14 to 16 digit number using only 0-9 -->
  <input type="submit" value="Submit">
</form>