HTML

HTML Forms

forms are the ways used to collect information, the most famous form is google form that used to get information from people.
a form has many filed to get data such as:

• text fields: to input plain text such as username or email
• password field: to enter password, where the characters show as starts so that no one can see the password.
• drop down menu: to choose a value among specific values.
  

and many other.

Forms Work

once the submit button for the form clicked, all the data is sent to a server, where this data is being processed using a programming language, and this data could be store in databases.

to create a form in html use the form tag, this tag has two attributes need to specify them, first the action attribute which its value is the url for the page on server that will receive the information form once it submitted. And the other attribute is the method attribute which specify the way that data will send use, and its value could be get for unencrypted information and post for encrypted information.

Example of Form Input Fields

1. input text input.

<!-- since input fields has no content, you must specify to the user-->
<!--what to write in this filed, use paragraph tag for example -->
<p>Username</p>
<!--the type is used to specify what the input filed will be for--><br>
<!--change it to password for password input field--><br>
<!-- the name used to identify the filed and link its dat with it-->
<!--it must be unique a cross the page -->
<input type="text" name="username_filed">

Login Example

username

password

1. input field radio button

<p>Choose color</p>
<input type="radio" name="red_color" value="red">
<input type="radio" name="blue_color" value="blue">
<input type="radio" name="green_color" value="green">

checked is used to check the default value.

Choose color

Red Blue Green

1. Drop down menu list uses to choose a value among many values, use the option tag within the select tag to add option to the menu.
   

<p>choose the read you want</p>
<select name ="reads">
<option value="read1">Read1<option>
<option value="read2">Read2<option>
<option value="read3">Read3<option>
</select>
</p>

choose the read you want

Read1 Read2 Read2

there are many other fields such as file field to upload a file to the form, and submit button to submit the form once the user clicks on the enter key.

Form Validation

html5 added validation to the input fields so that it shows warning message to the user if he forget to fill a filed, and the form won’t be submitted if the field is requires input. to achieve that add the require attribute with ‘attribute’ value to the required fiele.

html5 also added validation for the input filed to be email, or url, and the form won’t be submitted until valid email or url entered.

<p>Enter Your Email: <input type="email" name="email_filed">
<input type="submit" value="Submit">

Try it: by typing random text
hover the mouse over the input filed, it will show a message to tell that you must enter email.

Enter Your Email:

Lists, Tables and Forms

list style can be changed using css

JavaScript

coming soon…