[TIL] 20201107 HTML: Forms & Tables

Table

What are tables?

• Structured sets of data, made up of rows and columns
• Early Usage
  • In the early days of the web, tables were commonly used to create page layouts.
  • Today, you should only use th etable element when you are creating an actually data table.

 

<table> elements & attributes

• <th> 
  
  • table header
  • defines a cell as header of a group of table cells.
• <tr>
  • table row 
  • defines a row of cells in a table.
• <td> 
  • table data cell
  • represents a single cell of a table that contains data
• Example (3x2 table)

1	2	3
4	5	6

<table>
    <tr>
    	<th> 1 </th>
        <th> 2 </th>
        <th> 3 </th>
    </tr>
    <tr>
    	<td> 4 </td>
    	<td> 5 </td>
    	<td> 6 </td>
    </tr>
</table>
        

• <thead>, <tfoot>, <tbody>
  • breaks up the table into logical sections.
  • important as semantic markup
• colspan & rowspan attributes
  • example

1	2		3
	2-1	2-2

<table>
    <thead>
    	<tr>
            <th rowspan="2"> 1 </th>
            <th colspan="2"> 2 </th>
            <th rowspan="2"> 3 </th>
        </tr>
        <tr>
            <th> 2-1 </th>
            <th> 2-2 </th>
        </tr>
    </thead>
    ....
</table>

 

 

Form

<form> element

• A shell or container that doesn't have any visual impact.
• Forms are filled with a collection of inputs, checkboxes, buttons, etc.
• Represents a document section containing interactive controls for submitting information.
• The action attribute specifies where the form data should be sent. (It's the address for the package)
• The method attribute specifies which HTTP method should be used.
• When a form is submitted, a HTTP request will be sent and where that request goes to can be controlled by using this attribute called "action"

 

<input> element

• Used to create a variety of different form controls.
• 20+ possible types of inputs, ranging from date pickers to checkboxes.
• Changing type attribute alters the input's behavior and appearance.
• Doesn't have closing tag.
• Defult : text input
• placeholder attribute : the text that shows up when the input is empty.

 

<label> element

• Labels are very important for accessability, and making the form easier to use.
• Labels are connected to the input through for attribute in <label> and id attribute in <input>.
• When the label is clicked, connected input is clicked.

 

<form>, <input>, <label> example

<form action="/url">
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese preference" id="cheese">
</form>

※ id attribute should be exclusive for this element, and can't start with nubmers.

 

<button> element

• Inside of the <form> element, in default state, it submits the form when clicked.
• Outside of the <form> element, in default state, it doesn't do anything.
• type attribute can be specified.
  • button (default outside of <form>)
  • menu
  • reset
  • submit (default inside of <form>)

 

name attribute

• Used when the data is submitted.
• Can be checked in the URL.

 

Checkbox

• <input type="checkbox">
• Can make it checked to from the start with attribute "checked"

<form action="/checkbox">
    <input type="checkbox" name="agree_tos" id="agree" checked>
    <label for="agree">I agree.</label>
</form>

 

Radio Buttons

• <input type="radio">
• Only one of the choices can be selected.
• All the radio buttons should share the smae name to be considered as a group.
• Need "value" attribute to send information.

<form action="/radiobutton">
    <p>What size do you want?</p>
    
    <input type="radio" name="size" id="small" value="samll size">
    <label for="small">Small</label> <br>
    
    <input type="radio" name="size" id="medium" value="medium size">
    <label for="medium">Medium</label> <br>
    
    <input type="radio" name="size" id="large" value="large size">
    <label for="large">Large</label> <br>
</form>

 

Range

• A slider where a user can select some value on a sliding range
• Minimum, Maximum value can be set.

<form action="/range">
    <label for="food">Amount of cat food</label>
    <input type="range" id="food" min="30" max="100" step="10" name="cat food">
</form>

 

<select> element

• A drop down menu
• <select> element has <option> element inside.
• can pre-select with attribute "selected"

<form action="/select">
    <label for="breed">What's your favorite cat breed?</label>
    <select name="cat breed" id="breed">
    	<option value="">--Please choose an option--</option>
    	<option value="ks">Korean Shorthair</option>
    	<option value="as">Ameircan Shorthair</option>
    	<option value="ab">Abyssinian</option>
    </select>
</form>

 

<textarea> element

• multiline text input

<form action="/textarea">
    <label for="request">Any special requests?</label>
    <textarea name="requests" placeholder="Enter requests here." id="request" col="30" rows="40">
    </textarea>
</form>

 

 

HTML5 form Validations

Validation

• Adding constraints
  • ex) password should be longer than 8 letters
• Validation user input or data (on the server side)

 

Attributes

• required
  • <input type="text" ... required>
  • input is required to submit
• minlength, maxlength
  • <input type="text" ... minlength="4" maxlength="15">
  • for text input
• min, max
  • <input type="number" ... min="1" max="100">
  • for number input
• pattern
  • specifies a regular expression the form control's value should match
    • ex) A password is required to include a lowercase letter, uppercase letter, and a number.
  • There are "built-in" patterns
    • email type requires @

 

 

 

 

* This post is a summary of Udemy Course "The Web Developer Bootcamp" by Colt Steele.