DEV Community

Code_Regina
Code_Regina

Posted on • Updated on

|HTML| HTML: Forms and Tables

          -Introducing HTML Tables 
          -Tables: TR, TD and TH Elements
          -Tables: Thead, Tbody, and Tfoot
          -The Form Element
          -Common Input Types
          -The All-Important Label
          -HTML Buttons
          -The Name Attribute
          -Radio Buttons, Checkboxes and Selects
          -Range and Text Area
          -HTML5 Form Validations
Enter fullscreen mode Exit fullscreen mode

###Introducing HTML Tables
A table is data displayed in two dimensional rows and column structure. Tabular data is a clear way of displaying information. Tabular data is information that can be used with rows and columns.

Tables: TR, TD and TH Elements

td element defines a cell of a table that contains data.
tr element defines a row of cells in a table.
th elements defines a cell as header of a group of tables.

Tables: Thead, Tbody, and Tfoot

thead elements defines a set of rows defining the head of the columns of the table.

tbody encapsulate a set of table rows, elements that indicate that they are comprised of the body of the table.

The Form Element

The form element is a container that doesn't have any visual impact. The form is filled with a collection of inputs, checkboxes, and buttons.

-Form elements represents a document section containing interactive controls for submitting information.

-Action attribute specifies where the form data should be sent.

-Method attribute specifies which HTTP method should be used.

Common Input Types

-The input element is used to create a variety of different form controls.

The input tag does not have a closing tag.

-The type attribute is where the magic happens. Changing type alters the input behavior and appearance.

The All-Important Label

The label elements represents a caption for an item in a user interface. Labels are important for accessibility. It makes forms easier to use.

Only one element on a page should have a given ID. It suppose to be unique for the one input.

HTML Buttons

Buttons can exist either inside or outside forms.
Buttons are used to submit information when inside a form.
Buttons can also be used for navigation purposes.

The Name Attribute

The Name Attribute is used to label data that will be sent to the server.
The Name Attribute is used in forms.
It is important to give the data relevant names so that the data can be easily identified.

Radio Buttons, Checkboxes and Selects

It is possible to use input types to decide between radio buttons, checkboxes, and selects types.

input type = "checkbox"
will generate a checkbox in the input field.

input type = "radio"
will generate a radio button in the input field.

select is a drop-down menu

Range and Text Area

input type = "range"
will generate a slider where a user can select some values on a sliding range.
Min and Max values are used to input a given range.

textarea element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text.

textarea are commonly used for a comment section to either give or receive feedback in a form.

rows and cols are used to give a sizeable value.

HTML5 Form Validations

Form validations are used to add constraints in user input or data. Also used to make sure that data is entered into the field correctly.

Top comments (0)