Scribd
Upload
7 views

HTML Part 2

Uploaded by

Prachi Panjikar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views

HTML Part 2

Uploaded by

Prachi Panjikar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 31

HTML Part 2

HTML <meta> tag


• The <meta> tag defines metadata about an HTML document.
 Metadata is data (information) about data.

• <meta> tags always go inside the <head> element,

• are typically used to specify character set, page description, keywords, author of the document,
and viewport settings.
• Metadata will not be displayed on the page, but is machine parsable.
• Metadata is used by browsers (how to display content or reload page), search engines (keywords),
and other web services.
<meta charset=……>
• The charset is an HTML attribute that defines the character encoding for your browser to
use when displaying the website content.
• UTF Unicode Transformation Format
• The HTML5 specification encourages web developers to use the UTF-8 character set,
which covers almost all of the characters and symbols in the world!

What if I forget to include <meta


charset="utf-8"> in my HTML file?
The default character encoding used in HTML5 is UTF-8.
• There is a method to let web designers take control over the viewport (the user's visible
area of a web page), through the <meta> tag.
• This gives the browser instructions on how to control the page's dimensions and scaling.
• The width=device-width part sets the width of the page to follow the screen-width
of the device (which will vary depending on the device).
• The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by
the browser.
Without viewport meta tag With viewport meta tag
• Define keywords for search engines:
• Your web page will be listed on top if the keywords used by a internet surfer also
are present in your meta keywords content.
• Example
• If a google search is HTML and CSS pages than your page will appear on top of
the search list since these keywords are present in your met tag.
• Define a description of your web page

• Define the author of a page:


Forms in HTML
• <form>…..</form> is just another kind of HTML ta which is use to create forms in
HTML
 Usually the purpose is to ask the user for information
 The information is then sent back to the server

• A form is an area that can contain form tag


• One of the important form tag is <input> tag
• Form elements include: buttons, checkboxes, text fields, radio buttons, drop-down
menus, et
• Other kinds of HTML tags can be mixed in with the form elements
<input type=“ “> tag
• Most, but not all, form elements use the input tag, with a type="..." attribute to tell
which kind of element it is
• Type can be :
 text
 password
 hidden
 submit
 reset
 button
 file
 image.
 checkbox,
 Radio
 dropdown
The Name Attribute for <input>
• Notice that each input field must have a name attribute to be submitted.

• If the name attribute is omitted, the value of the input field will not be sent at all.
<input type=“text”>
• Will create a single line text field
<input type=“password”>
Creates a text input field but the input entered will be hidden
<input type=“email”>
• is used for input fields that should contain an e-mail address.
• the e-mail address can be automatically validated when submitted .
<input type=“submit”>
• Creates 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.
• The form-handler is specified in the form's action attribute:
<input type=“date”>
• Used to create an input field to select date
• Depending on the browser a date picker will appear

You can also use the min and max


attributes to add restrictions to dates
In the given example only dates between 10th
August to 28th August can be selected.
<input type=“time”>
• Used to create an input field to select time
• Depending on the browser a time picker will appear
<input type=“datetime-local”>
• Used to create an input field to select date as well as time
• Depending on the browser a date & time picker will appear
<input type=“month”>
• Used to create an input field to select a month and year
• Depending on the browser a month picker will appear
<input type=“color”>
• The <input type="color"> defines a color picker.
• The default value is #000000 (black)
<input type=“file”>
• A button to select and browse files from computer will appear on screen.
• It can be used to take files as input.
<input type=“number”>
• Defines a numeric input field
• You can also set restrictions on what numbers are accepted by
using min max attribute.
<input type=“radio”>
• Used to create radio buttons
• Radio buttons let a user select ONE of a limited number of choices.
<input type="checkbox">
• Creates checkboxes
• Checkboxes let a user select ZERO or MORE options of a limited number
of choices
<input type=“button”>
• Is used to create a button.
• The value attribute defines the text to be written on the button.
• The onClick attribute defines the link of the page to which user will be directed to
on clicking of the button
<input type=“image”>
• Creates an image as a submit button
• Will submit form data to a form-handler
<input type=“reset”>
• defines a reset button which resets all form values to its initial values.

Tip: Avoid reset buttons in your forms! It is


frustrating for users if they click them by
mistake.
<select > tag for Dropdown Menu
• <select> tag is used to create a dropdown list
• <option> tag within select is used to list items in the drop down menu
<textarea>….</textarea>
• <textarea> tag is used to create a multi-line text input field.
• The <textarea> element is often used in a form, to collect user inputs like
comments or reviews.
• Cols and rows attribute can be used to specify the no of columns and rows of
the text field.
<label>…..<label>
• Always use the <label> tag to define labels for
• Tip: The for attribute of <label> must be equal to the id attribute of the related element
to bind them together. A label can also be bound to an element by placing the element
inside the <label> element.
Exercise: Create the following form.

You might also like