Scribd
Upload
7 views

HTML Part 2

Uploaded by

Prachi Panjikar
Copyright
© © All Rights Reserved
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
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