yahxee 5th class
yahxee 5th class
Design
HTML, CSS and
JavaScript
By Yahuza
Yakubu
HTML FOR
M
The <form> Element
HTML forms are used to collect user input.
Sample
The <form> element defines an HTML form: <form>
form elements
</form>
HTML forms contain form elements.
Type Description
text Defines normal text input
radio Defines radio button input (for selecting one
of many choices)
submit Defines a submit button (for submitting the
form)
Text Input
<input type="text"> defines a one-line
input field for text input:
<form>
First name: <br>
<input type="text" name="firstname">
<br>
Last name: <br>
<input type="text" name="lastname">
</form>
Result:
Radio Button Input
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
<form>
<input type="radio“ checked> Male
<br>
<input type="radio"> Female <br>
<input type="radio"> Other
</form>
Result:
The Submit Button
<input type="submit"> defines a button for submitting a form to
a form-handler.
The form-handler is typically a server page with a script for processing
input data.
The form-handler is specified in the form's action attribute:
<form action="action_page.php">
First name: <br>
<input type="text" name="firstname" value=“Yahuza">
<br>
Last name:<br>
<input type="text" name="lastname" value=“Yakubu">
<br><br>
<input type="submit" value="Submit">
</form>
Result:
The Action & Method Attribute
The action attribute defines the action to be performed when the form is
submitted.
The common way to submit a form to a server, is by using a submit button.
Normally, the form is submitted to a web page on a web server.
A server-side script is specified to handle the submitted form.
<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"
><br><br>
<input type="submit" value="Submit">
</form>
Grouping Form Data with
<fieldset>
The <fieldset> element groups related data in a form.
The <legend> element defines a caption for the <fieldset> element.
<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><b
r><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Result:
Other Elements
<select>
<datalist>
<textarea>
<button>
<lable>
Other Input Type
• number • email
• password • date
• Checkbox • datetime
• Button • month
• file • time
• color
Input Restrictions
Attribute Description
disabled Specifies that an input field should be disabled
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
maxlength Specifies the maximum number of character for an input field
Questions?
HTML Block and Inline Elements
HTML Block and Inline Elements
Every HTML element has a default display value depending
on what type of element it is. The default display value for
most elements is block or inline.
Block-level Elements
A block-level element always starts on a new line and
takes up the full width available (stretches out to the
left and right as far as it can).
<h2>London</h2>
<p>London is the capital city of England. It is the most
populous city in the United Kingdom, with a metropolitan
area of over 13 million inhabitants.</p>
</div>
HTML Block and Inline Elements
The <span> Element
The <span> element is an inline element that is often used as a container
for some text.
The <span> element has no required attributes, but style and class are
common.
When used together with CSS, the <span> element can be used to style
parts of the text: