Diploma in Engineering: November 2011

Tuesday 29 November 2011

HTML Tutorial - 10

How to create form with checkboxes and a submit button in Html Script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.

<html>
<body>

<form name="input" action="html_form_action.asp" method="get">
<input type="checkbox" name="Mobile" value="Nokia" /> I have a Nokia<br />
<input type="checkbox" name="Mobile" value="Samsung" /> I have a Samsung
<br /><br />
<input type="submit" value="Submit" />
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>

</body>
</html>

Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see like the below picture in your browser to submit the form.

Click on the submit button to submit the data to a page called "html_form_action.asp"

HTML Tutorial - 9

How to create Form with text fields and a submit button in Html Script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.

<html>
<body>

<form name="input" action="html_form_action.asp" method="get">
First name: <input type="text" name="FirstName" value="New" /><br />
Last name: <input type="text" name="LastName" value="Bengaluru" /><br />
<input type="submit" value="Submit" />
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>

</body>
</html>
Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see like the below picture in your browser to enter your First name, Last name and a submit button to submit the information.

Click on the submit button to submit the data to a page called "html_form_action.asp"

HTML Tutorial - 8

How to Draw a border around form-data in Html Script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.

<html>
<body>

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30" /><br />
E-mail: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>

</body>
</html>

Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see like the below picture in your browser to enter your Name, E-mail, Date of birth.

Click on blank field to enter your Name, E-mail, Date of birth.

HTML Tutorial - 7

How to create a button in Html Script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.

<html>
<body>

<form action="">
<input type="button" value="Hello New Bengaluru !">
</form>

</body>
</html>

Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see like the below picture in your browser.

Note: If you click on this button it will not perform any action !

HTML Tutorial - 6

How to create a text area in Html Script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.

<html>
<body>
<p>
Share your ideas by posting a comment here.
</p>
<textarea rows="10" cols="30"> Click here to edit.</textarea>
</body>
</html>

Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see like the below picture on your browser & click on the text area to edit whatever you want to edit.

Click on the text area to edit whatever you want !

HTML Tutorial - 5

How to create simple drop-down list in Html Script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.

<html>
<body>

<form action="">
<select name="Mobiles">
<option value="nokia">Nokia</option>
<option value="samsung">Samsung</option>
<option value="reliance">Reliance</option>
<option value="mts">MTS</option>
</select>
</form>

</body>
</html>

Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see like the below picture when you click on the drop down list.

You can select any one of the option !

HTML Tutorial - 4

How to create Radio buttons in Html script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.

<html>
<body>

<form action="">
<input type="radio" name="Gender" value="male" /> Male<br />
<input type="radio" name="Gender" value="female" /> Female
</form>

<p><b>Note:</b> When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>

</body>
</html>

Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see in the browser to select any one option as in below picture.

When you select any one option your browser will show like this !

HTML Tutorial - 3

How to create Check boxes in Html script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.

<html>
<body>

<form action="">
<input type="checkbox" name="mobile" value="Nokia" /> I have a Nokia<br />
<input type="checkbox" name="mobile" value="Samsung" /> I have a Samsung
</form>

</body>
</html>

Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see as like the below picture.

When you select any one option you will see like this in your browser !

HTML Tutorial - 2

How to create Password fields in HTML script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.
<html>
<body>

<form action="">
Username: <input type="text" name="user" /><br />
Password: <input type="password" name="password" />
</form>

<p><b>Note:</b> The characters in a password field are masked (shown as asterisks or circles).</p>

</body>
</html>
Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see as like the below picture when you type the username and password.

You will see the script in your browser like this !

HTML Tutorial - 1

How to create text fields in HTML script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.
<html>
<body>
<form action="">
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
<p><b>Note:</b> Also note that the default width of a text field is 20 characters.</p>
</body>
</html>
Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see as like the below picture.

You will see like the script in your browser like this !

Diploma in Engineering

Labels