Diploma in Engineering

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 !

Diploma in Engineering

Labels

Tuesday, 29 November 2011

HTML Tutorial - 10

HTML Tutorial - 9

HTML Tutorial - 8

HTML Tutorial - 7

HTML Tutorial - 6

Newest