Skip to content

Home

Jump to bottom
hsrocks edited this page Nov 28, 2017 · 8 revisions

HTML Tables

Tables are used to give tabular representation of data .It can be 2d or more.

Basic table code :

<table border="1">
      <tr>
        <th>Name</th>
        <th>Value</th>
      </tr>
      <tr>
        <td>One</td>
        <td>1</td>
      </tr>
      <tr>
        <td>two</td>
        <td>2</td>
      </tr>
</table>

Here <table> tag is root tag for table. Inside it we have <tr> telling its a table row. Inside row we have

which is basically data in a column.Here their are 2 column and 3 rows.

By default table has no border

Now in HTML 5 the main focus is on semantics . So their are two more headers that we can use to give the table header more meaning:

  1. <thead> : Tells its has heading of the table.
  2. <tbody> : Tells it contains the body of the table.

Eg.

  <table border="1">
      <thead>
        <tr>
          <th>Name</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>two</td>
          <td>2</td>
        </tr>
      </tbody>
    </table>

For example go to tables.html file : https://github.com/hsrocks/intermediate_html

I have added one small example having few characters of prison break in tabular format . Go to prison-break.html file : https://github.com/hsrocks/intermediate_html

HTML Forms

Forms basically let us take input from the user .Eg. To upload the photo, to sign up on gmail/facebook , pick up your favourite color etc.

<form>:

Its a container for different types of inputs. The inputs can exist without having inside form but mainly if we want to send the bunch of data together we will use form tag.

<form  action="index.html" method="post">
</form>

action : URL where the form data is needed to be send

By default , if I dont specify the action it will remain at the exact same page where I am and refreshed it

method : The Type of HTTP request method

By default , if I dont specify the method its a GET request

Method Description
GET The GET method is used to retrieve information from the given server using a given URI. Requests using GET should only be used for data retrieval
HEAD Similar to GET, except that the server replies with a response line and headers, but no entity-body i.e the data content
POST The POST method is used when you want to send some data to the server, for example, file update, form data, etc.
PUT Used to update the content.It is used to update the content resource with the uploaded content.
DELETE The DELETE method is used to request the server to delete a data at a location specified by the URL
CONNECT The CONNECT method is used to establish a network connection to a web server over HTTP.
OPTIONS The OPTIONS method is used by the client to find out the HTTP methods and other options parameter supported by a server.

<input> :

It goes inside the form tag. It is used to create interactive control in order to accept the data from the user.Their are lot of input tag types but few of them I have shown below :

      <input type="text">
      <input type="checkbox">
      <input type="radio">
      <input type="search">
      <input type="date">
      <input type="file">
      <input type="color">

Form is a block level element whereas inputs are inline elements

<Label> :

Label allows us to add caption to individual element in our form . Instead of paragraph and other tag ; we use label because they help in making our site accessible. So if someone is visually impaired and they are trying to access our form ; they suppose try to sign up the screen reader software they are using is going to look for label tags.So it will let them know what each part of form corresponds to. Label are also important because they add meaning to the data i.e helps in describing the data.

HTML5 Form validations

Validation refers to rules and regulation that are needed to be enforced on different part of the form . Eg. password should be 8 character long , email cant be blank etc.

Required :

This attribute can be used with input tag to set the rule that the given input is required and cant be empty.

<label>
  Username:<input id="username" name ="username" type="text" placeholder="Your name" required>
</label>

input type

This attribute is used to check the type . Suppose our input is email :

<label>
   Email Id:<input id="email" name =email type="email" placeholder="Your email id" required>
</label>

And if I give wrong format like "abndk" it will give some error and I cant submit the form

Clone this wiki locally