Scribd
Upload
12 views

Lecture 4

The <form> tag is used to create HTML forms and can contain various form elements like <input>, <textarea>, <button>, <select> and <option>. It allows users to enter input which can then be sent to a server for processing. Common uses include login forms, search boxes, and data collection forms. CSS is used to style and lay out elements on HTML pages and can be defined internally, externally in CSS files, or inline in elements. CSS selectors are used to target specific elements for styling based on things like element names, ids, classes, attributes and more.

Uploaded by

Zakarya Raazi
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
12 views

Lecture 4

The <form> tag is used to create HTML forms and can contain various form elements like <input>, <textarea>, <button>, <select> and <option>. It allows users to enter input which can then be sent to a server for processing. Common uses include login forms, search boxes, and data collection forms. CSS is used to style and lay out elements on HTML pages and can be defined internally, externally in CSS files, or inline in elements. CSS selectors are used to target specific elements for styling based on things like element names, ids, classes, attributes and more.

Uploaded by

Zakarya Raazi
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

Definition and Usage

The <form> tag is used to create an HTML form for user


input.
The <form> element can contain one or more of the
following form elements:
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
<output>
• Example
• An HTML form with two input fields and one submit
button:
• <form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
Definition and Usage

The <input> tag specifies an input field where the user can enter data.

The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending on the type attribute.

The different input types are as follows:

<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"> Tips and Notes
<input type="reset">
<input type="search">
<input type="submit"> Tip: Always use the <label> tag to define labels
<input type="tel">
<input type="text"> (default value)
for <input type="text">, <input
<input type="time"> type="checkbox">, <input type="radio">,
<input type="url">
<input type="week"> <input type="file">, and <input
type="password">
Look at the type attribute to see examples for each input type!
Relation between Html and PHP
Add.html

<html>
<body>
<h1>Program for adding 2 numbers</h1>
<form action="add.php" method="get">
<label>enter 1st number</label>
<input type="text" name="t1"><br><br>
<label>Enter 2nd number</label>
<input type="text" name="t2"><br><br>
<input type="submit" name="submit">
</form>
</body>
</html>
<?php
$a=$_GET["t1"];
$b=$_GET["t2"];
$c=$a+$b;
echo "Result=".$c;
?>
Code of php and html in one file
Addhtmlphpcombine.php

<html>
<body>
<h1>Program for adding 2 numbers</h1>
<form action="add.php" method="get">
<label>enter 1st number</label>
<input type="text" name="t1"><br><br>
<label>Enter 2nd number</label>
<input type="text" name="t2"><br><br>
<input type="submit" name="submit">
</form>
</body>
</html>
<?php
if(isset($_GET["submit"])) {
$a=$_GET["t1"];
$b=$_GET["t2"];
$c=$a+$b;
echo "Result=".$c;
}
?>
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
Types of CSS
Three Ways to Insert CSS
• There are three ways of inserting a style sheet:
• External CSS
• Internal CSS
• Inline CSS
External CSS
• With an external style sheet, you can change
the look of an entire website by changing just
one file!
• Each HTML page must include a reference to
the external style sheet file inside the <link>
element, inside the head section.
• Example
• External styles are defined within the <link> element, inside the <head>
section of an HTML page:
• <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
An external style sheet can be written in any text editor, and must be
saved with a .css extension.
• The external .css file should not contain any HTML tags.
• Here is how the "mystyle.css" file looks:
• "mystyle.css"
• body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
Internal CSS
• An internal style sheet may be used if one
single HTML page has a unique style.
• The internal style is defined inside the <style>
element, inside the head section.
Example
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Inline CSS
• An inline style may be used to apply a unique
style for a single element.
• To use inline styles, add the style attribute to
the relevant element. The style attribute can
contain any CSS property.
Example
Inline styles are defined within the "style" attribute of the
relevant element:
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body>
</html>
• CSS Selectors
• CSS selectors are used to "find" (or select) the HTML elements
you want to style.
• We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific
relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or
attribute value)
The CSS element Selector
The element selector selects HTML elements based on
the element name.
Example
Here, all <p> elements on the page will be center-
aligned, with a red text color:
p{
text-align: center;
color: red;
}
• The CSS id Selector
• The id selector uses the id attribute of an HTML
element to select a specific element.
• The id of an element is unique within a page, so
the id selector is used to select one unique
element!
• To select an element with a specific id, write a
hash (#) character, followed by the id of the
element.
• Example
• The CSS rule below will be applied to the
HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}
• The CSS class Selector
• The class selector selects HTML elements with a specific class
attribute.
• To select elements with a specific class, write a period (.)
character, followed by the class name.
• Example
• In this example all HTML elements with class="center" will be
red and center-aligned:
.center {
text-align: center;
color: red;
}
• Example
• In this example only <p> elements with
class="center" will be center-aligned:
p.center {
text-align: center;
color: red;
}
• HTML elements can also refer to more than
one class.
• Example
• In this example the <p> element will be styled
according to class="center" and to
class="large":
<p class="center large">This paragraph refers to
two classes.</p>
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}

p.large {
font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>


<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>

</body>
</html>

You might also like