Tutorial for Type Attribute in php

What is Type Attribute?

It indicates the type of input element. It’s an empty tag. The default value is text.

Example:-

<input>

<input type=“text”>
  • Text – It defines a single-line text field.
<input type=“text”>
  • Password – A password field is like text field, the difference being that this control hides each typed character by displaying an asterisk(*) or bullets(●) instead of the character itself.
<input type=“password”>
  • Button – This is used to add a button on a web form to activate a script when an user click the button.
<input type=“button”>
  • Email – This field is used to add an email address or a list of email address to a form, where type=“email” is a value for the input type. The input format should be an email like example@gmail.com else it will prompt an error.
<input type=“email”>
  • Check Box – A check box is a small box, which when selected includes a checkmark. It is used to allow the user to select one or more than one of the options available on a web page. An User can select or clear the check box by clicking it
<input type=“checkbox”>
  • Radio Button – A radio button is used to create a series of options of which only one can be selected. It is displayed as a circle which when selected, displays a dot in the middle.
<input type=“radio”>
  • URL – The URL field is used to enter only the web addresses, in their correct format. If the URL is not entered in the correct format then the URL field validates the text field to enter web address.
<input type=“url”> 
  • Autofocus – helps in keeping the focus of mouse pointer on the input field.
  • Pattern – defines the regular expression of the text that should be entered in the text field.
  • Search Box – This is used to add a search box to a form.
<input type=“search”>
  • Tel – The tel type represents a one-line plain-text edit for entering a telephone number.
<input type=“tel”>
  • Range – Range input represents the input of limited range numerical values.
<input type=“range”>
  • Number – Number is used to validate the textbox only if the value within the field is a numerical value.
<input type=“number”>
  • File – This is used to upload a file on a web page. You also need to set the enctype=“multipart/form-data”
<input type=“file”>
  • Image – It represents either an image from which the UA enables a user to interactively select a pair of coordinates and submit the form, or alternatively a button from which the user can submit the form.
<input type=“image”>
  • Hidden – A hidden control stores the data that is not visible to the user on a web page. This control is used to submit some information, which can not be edited by user.
<input type=“hidden”>
  • Submit – A submit button is used to transfer form data to the URL specified in the <form action> tag.
<input type=“submit”>
  • Reset Button – A reset button helps user to clear all the data that they have entered in the text fields.
<input type=“reset”>

  • Date – This is used for input fields that should contain a date.
<input type=“date”>
  • Time – It allows the user to select a time.
<input type=“time”>
  • DateTime – It allows the user to select  date and time.
<input type=“datetime”>
  • Datetime-local – It allows the user to select a date and time.
<input type=“datetime-local”>
  • Month – It allows the user to select a month and year.
<input type=“month”>
  • Week – It allows the user to select a week and year.
<input type=“week”>
  • Color – It is used for input fields that should contain a color.
<input type=“color”>
Tagged : / / / / / /

HTML: Anchor Tag

We can create hyperlinks using the anchor tag.

What is a Hyperlink?

A hyperlink is a link between web pages and it is used to connect one web page to another.

Ex:- <a href=”https://www.google.com”>Visit Google </a>

Anchor Tag Attributes

AttributeValueDescription
hrefURL referenceSpecifies the URL as a destination web page or a different section of the web page
downloadfilenameSpecifies that the target will be downloaded when a user clicks on the hyperlink
mediamedia_querySpecifies what media/device the linked document is optimized for
hreflanglanguage_codeSpecifies the language of the linked document
typemedia_typeSpecifies the media type of the linked document

Anchor Tag Attributes

AttributeValueDescription
target_blank _parent _top framename _selfOpens the linked document in a new window or tab Opens the linked document in the parent frame Opens the linked document in the full body of the window Opens the linked document in a named frame Opens the linked document in the same frame as it was clicked (this is the default)

Ex:- <a href=”https://www.google.com”target=”_blank”>Visit Google </a>

Anchor Tag Attributes

href Attribute

Syntax: – <a href=“URL”>

  • An absolute URL – points to another web site. Ex: – href=”http://www.google.com”
  • A relative URL – points to a file within a web site. Ex:- href=“page1.html”
  • Link to an element with a specified id within the page. Ex: –  href=”#bottom”
  • Other protocols. Ex:- https://, ftp://, mailto:, file:, etc..
  • A script. Ex:- href=‘javascript:alert(“Hello”);’

Download Attribute

The download attribute specifies that the target will be downloaded when a user clicks on the hyperlink.

Ex:- <a href=”image/example.jpg”download=”nature”>

Media Attribute

The media attribute specifies what media/device the linked document is optimized for.

This attribute is used to specify that the target URL is designed for special devices (like iPhone and Android etc), speech, or print media.

ValueDescription
widthSpecifies the width of the targeted display area.
“min-” and “max-” prefixes can be used.
Example: media=”screen and (min-width:500px)”
heightSpecifies the height of the targeted display area.
“min-” and “max-” prefixes can be used.
Example: media=”screen and (max-height:700px)”
device-widthSpecifies the width of the target display/paper.
“min-” and “max-” prefixes can be used.
Example: media=”screen and (device-width:500px)”
device-heightSpecifies the height of the target display/paper.
“min-” and “max-” prefixes can be used.
Example: media=”screen and (device-height:500px)”
orientationSpecifies the orientation of the target display/paper.
Possible values: “portrait” or “landscape”
Example: media=”all and (orientation: landscape)”
ValueDescription
aspect-ratioSpecifies the width/height ratio of the targeted display area.
“min-” and “max-” prefixes can be used.
Example: media=”screen and (aspect-ratio:16/9)”
device-aspect-ratioSpecifies the device-width/device-height ratio of the target display/paper.
“min-” and “max-” prefixes can be used.
Example: media=”screen and (aspect-ratio:16/9)”
colorSpecifies the bits per color of the target display.
“min-” and “max-” prefixes can be used.
Example: media=”screen and (color:3)”
color-indexSpecifies the number of colors the target display can handle.
“min-” and “max-” prefixes can be used.
Example: media=”screen and (min-color-index:256)”
monochromeSpecifies the bits per pixel in a monochrome frame buffer.
“min-” and “max-” prefixes can be used.
Example: media=”screen and (monochrome:2)”
ValueDescription
resolutionSpecifies the pixel density (dpi or dpcm) of the target display/paper.
“min-” and “max-” prefixes can be used.
Example: media=”print and (resolution:300dpi)”
scanSpecifies scanning method of a tv display.
Possible values are “progressive” and “interlace”.
Example: media=”tv and (scan:interlace)”
gridSpecifies if the output device is grid or bitmap.
Possible values are “1” for the grid, and “0” otherwise.
Example: media=”handheld and (grid:1)”
ValueDescription
allDefault. Suitable for all devices
auralSpeech synthesizers
brailleBraille feedback devices
handheldHandheld devices (small screen, limited bandwidth)
projectionProjectors
printPrint preview mode/printed pages
screenComputer screens
ttyTeletypes and similar media using a fixed-pitch character grid
tvTelevision type devices (low resolution, limited scroll ability)
  • And
  • Not
  • ,(OR)

Ex:- media=”print and (resolution:300dpi)”>

hreflang Attribute

Type Attribute

http://www.iana.org/assignments/media-types/media-types.xhtml

rel Attribute

ValueDescription
alternateLinks to an alternate version of the document (i.e. print page, translated or mirror)
authorLinks to the author of the document
bookmarkPermanent URL used for bookmarking
helpLinks to a help document
licenseLinks to copyright information for the document
nextThe next document in a selection
nofollowLinks to an unendorsed document, like a paid link.
(“nofollow” is used by Google, to specify that the Google search spider should not follow that link)
noreferrerSpecifies that the browser should not send a HTTP referer header if the user follows the hyperlink
prefetchSpecifies that the target document should be cached
prevThe previous document in a selection
searchLinks to a search tool for the document
tagA tag (keyword) for the current document

Link Color

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue

A visited link is underlined and purple

An active link is underlined and red

link – specifies the color of the hyperlink that has not been visited or clicked
  before on a webpage

vlink – specifies the color of hyperlink that has been visited before on a web page

alink – specifies the color of currently active links

Tagged : / / / / / / / / / / / / / /