HTML Forms and Css

Chapter no.
7:- <form>tag
HTML <form> Tag :-
The <form> tag is used to add HTML forms to the web page for user input. Forms are used to
pass the data submitted by the user to the server. The data is sent when pressing the "Submit"
button. If there isn’t such button, the information is sent when the "Enter" key is pressed.
Syntax
The <form> tag comes in pairs. The content is written between the opening (<form>) and closing
(</form>) tags.
The <form> element contains other HTML tags, which define the input method of data:
 The <input> tag defines a user input field.

 The <textarea> tag defines a form field to create a multiline input area.
 The <button> tag is used to place a button inside a form.
 The <select> tag sets up a control for creating a drop-down list box.
 The <option> tag defines the items in the drop-down list set by the <select> tag.
 The <optgroup> tag groups related data in the drop-down list set by the <select> tag.
 The <fieldset> tag visually groups the elements inside the form set by the <form> tag.
 The <label> tag sets the text label for the <input> element.
 The <legend> tag defines the header for the <fieldset> element.
Example of <form>tag:-
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="server-script-url-here" method="GET or POST" >
<label for="fname">Name</label>
<input type="text" name="FirstName" id="fname" value="Mary"/><br/><br/>
<label for="lname">Surname</label>
<input type="text" name="LastName"id="lname"
value="Thomson"/><br/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
Example of the HTML <form> tag with the <texarea> tag:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Form example</h1>
<form action="server-script-url-here" method="GET or POST" >
<textarea rows="3" cols="30" placeholder="Type some text
here"></textarea><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
HTML Input Types
Here are the different input types you can use in HTML:
 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">
Syntax input type:-
1)<input type="text"> defines a single-line text input field
2) <input type="password"> defines a password field
3) <input type="submit"> defines a button for submitting form data to a form-handler.

The form-handler is typically a server page with a script for processing input data.
4) <input type="reset"> defines a reset button that will reset all form values to their default values
5) <input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
6) <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
8) <input type="button"> defines a button:
9) The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
10) The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Examples:-
<html>
<body>
<h2>Text field</h2>
<p>The <strong>input type="text"</strong> defines a one-line text input field:</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text field is 20 characters.</p>
</body>
</html>
Output:-
Text field
The input type="text" defines a one-line text input field:
First name:
Last name:
Note that the form itself is not visible.
Also note that the default width of a text field is 20 characters.

Chapter no.8:- DHTML And DOM And CSS
DHTML:-
DHTML stands for Dynamic HTML, it is totally different from HTML. ... The DHTML is based on the
properties of the HTML, javascript, CSS, and DOM (Document Object Model which is used to access
individual elements of a document) which helps in making dynamic content. It is the combination of
HTML, CSS, JS, and DOM.
DHTML - HTML Document Object Model (DOM)
The DOM presents HTML as a tree-structure (a node tree), with elements, attributes, and text:
The HTML DOM is:
 A standard object model for HTML

 A standard programming interface for HTML
 Platform- and language-independent
WHAT IS CSS:-
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files
CSS Syntax:-
A CSS rule-set consists of a selector and a declaration block:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly
braces.
SOME EXAMPLE OF CSS:-
<html> <head> <style>
p {color: red; text-align: center;}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p> </body> </html>
--------------------------------------------------------------------------------------------------------------------
OUTPUT :-
Hello World!
These paragraphs are styled with CSS.
-------------------------------------------------------------------------------------------------------------------
Example Explained
 p is a selector in CSS (it points to the HTML element you want to style: <p>).
 color is a property, and red is the property value
 text-align is a property, and center is the property value

HTML Forms and Css

Uploaded by

HTML Forms and Css

Uploaded by

Chapter no.

HTML <form> Tag :-

 The <input> tag defines a user input field.

Example of the HTML <form> tag with the <texarea> tag:

Syntax input type:-

1)<input type="text"> defines a single-line text input field

2) <input type="password"> defines a password field

3) <input type="submit"> defines a button for submitting form data to a form-handler.

5) <input type="radio"> defines a radio button.

6) <input type="checkbox"> defines a checkbox.

8) <input type="button"> defines a button:

<p>The <strong>input type="text"</strong> defines a one-line text input field:</p>

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname"><br><br>

<input type="submit" value="Submit">

<p>Also note that the default width of a text field is 20 characters.</p>

The input type="text" defines a one-line text input field:

Note that the form itself is not visible.

Also note that the default width of a text field is 20 characters.

DHTML - HTML Document Object Model (DOM)

The HTML DOM is:

 A standard object model for HTML

CSS stands for Cascading Style Sheets

External stylesheets are stored in CSS files

A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

SOME EXAMPLE OF CSS:-

<html> <head> <style>

p {color: red; text-align: center;}

These paragraphs are styled with CSS.

You might also like