HTML: Fieldset tag

This creates a box around the related form controls.

<fieldset>……</fieldset>
AttributeValueDescription
disableddisabledSpecifies that a group of related form elements should be disabled
formform_idSpecifies forms the fieldset belongs to
nametextSpecifies a name for the fieldset
Tagged : / / /

HTML: Label

It defines a set of text that is associated with a particular element. <label>…..</label>

AttributeValueDescription
forelement_idSpecifies which form element a label is bound to
formform_idSpecifies one or more forms the label belongs to

element_id – The id of the element the label is bound to

Tagged : / / / / /

HTML: Text Area

A text area is a multiline text field. A user can write an unlimited number of characters in the text area.

<textarea>……</textarea>
AttributeValueDescription
autofocusautofocusSpecifies that a text area should automatically get focus when the page loads
colsnumberSpecifies the visible width of a text area
dirnametextareaname.dirSpecifies that the text direction of the textarea will be submitted
disableddisabledSpecifies that a text area should be disabled
formform_idSpecifies one or more forms the text area belongs to
maxlengthnumberSpecifies the maximum number of characters allowed in the text area
nametextSpecifies a name for a text area
placeholdertextSpecifies a short hint that describes the expected value of a text area
readonlyreadonlySpecifies that a text area should be read-only
requiredrequiredSpecifies that a text area is required/must be filled out
rowsnumberSpecifies the visible number of lines in a text area
wrapSoft(default)
hard
Specifies how the text in a text area is to be wrapped when submitted in a form
ValueDescription
softThe text in the textarea is not wrapped when submitted in a form.
hardThe text in the textarea is wrapped (contains newlines) when submitted in a form. When “hard” is used, the cols attribute must be specified
Tagged : / / / / / / / / /

HTML: Form Tag

HTML forms are used to collect some data from the site visitor. The HTML <form>…..</form> tag is used to create an HTML form.

<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
AttributeValueDescription
accept-charsetUTF-8Specifies the charset used in the submitted form (default: the page charset).
actionURLContains a URL that defines where to send the data after submitting the form
autocompleteOn (default)
Off
Determines that the browser retains the history of previous values.
enctype (default: is url-encoded)specifies how the browser encodes the data before it sends it to the server.
methodGET (default)
POST
Specifies how to send the form data to a web server. The data can be sent as URL variables, by using the get method or as HTTP post, by using the post method
namenameSpecifies a name used to identify the form
novalidatenovalidateSpecifies that the browser should not validate the form.
target_self (default)
_blank
_parent
_top
framename
Specifies the target of the address in the action attribute

Input Tag

<input> tag prompts the user to enter data and also request for the information from the web server after submitting the web form.

<form>
	<input>
</form>
No input end tag in HTML5
AttributeValueDescription
acceptfile_extension
audio/*
video/*
image/*
media_type
Specifies the types of files that the server accepts
alttextSpecifies an alternate text for an image. only used with type=“image”
autocompleteon
off
It enables or disable autocomplete in <input> tag
autofocusautofocusSpecifies that an <input> element should automatically get focus when the page loads
checkedcheckedInput element should be checked/selected when a web page loads. It is used only with  type=”checkbox” and type=”radio”
dirnameinputname.dirSpecifies that the text direction will be submitted
disableddisabledDisables the input element when it loads on the client side’s web page, so that user cannot write text in it or select it. This attribute cannot be used with type=“hidden”
formform_idSpecifies form’s id to which the input field belongs.
formactionURLSpecifies the URL of the file that will process the input control when the form is submitted
formenctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain
Specifies how the form-data should be encoded when submitting it to the server
formmethodGET
POST
Defines the HTTP method for sending data to the action URL
formnovalidateformnovalidateDefines that form elements should not be validated when submitted
formtarget_blank
_self
_parent
_top
framename
Specifies where to display the response that is received after submitting the form
heightpixelsIndicates the height of an input field
listId of a datalistContains the id of the <datalist> tag where a datalist element contains various options for an input field
maxnumber
date
Specifies the maximum value for an <input> element
number, range, date, datetime-local, month, time and week.
maxlength
minlength
numberSpecifies the maximum/minimum number of characters allowed in a text field.
minnumber
date
Specifies a minimum value for an <input> element
number, range, date, datetime-local, month, time and week.
multiplemultipleIndicates whether the user is allowed to enter more than one value
nametextDefines a unique name for the input element.
patternregexpSpecifies a regular expression that an <input> element’s value is checked against
placeholdertextSpecifies a short hint that describes the expected value
text, search, url, tel, email, and password
readonlyreadonlyIndicates that the value of this field cannot be modified.
requiredrequiredSpecifies that an input field must be filled out before submitting the form
sizenumberSpecifies the width of the control. If type=”text” or type=”password” this refers to the width in characters. Otherwise it’s in pixels.
srcURLDefines the URL of the image to display. It can be used only with type=“image”
stepnumberSpecifies the legal number intervals for an input field
typebutton
checkbox
color
date 
datetime 
datetime-local 
email 
file
hidden
image
month 
number 
password
radio
range 
reset
search
submit
tel
text
time 
url
week
Indicates the type of the input element. The default value is text.
valuetextSpecifies the value of an <input> element
widthpixelsIndicates the width of an input field

Type Attribute

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

Ex: –

<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”>

accept-charset Attribute

It specifies the character encodings that are to be used for the form submission.

ISO-8859-1 Character encoding for the Latin alphabet

UTF-8 Character encoding for Unicode

<form accept-charset=“UTF-8”>

Action Attribute

It contains a URL that defines where to send the data after submitting the form. It specifies the physical address of the server to which the user data should be redirected at the click of the submit button. action=http://www.something.com/something.html action=“page.html” action=“gotform.php” action=“example.asp”

If the action attribute is omitted, the action is set to the current page.

Autocomplete

On – The browser will automatically complete values based on values that the user has entered before. Off – User need to write all values each time they fill the form <form autocomplete=“on”>

enctype Attribute

It specifies how the browser encodes the data before it sends it to the server.

ValueDescription
application/x-www-form-urlencodedAll characters are encoded before sent (spaces are converted to “+” symbols, and special characters are converted to ASCII HEX values)
multipart/form-dataNo characters are encoded. This value is required when you are using forms that have a file upload control
text/plainSpaces are converted to “+” symbols, but no special characters are encoded
<form enctype=“multipart/form-data”>

Method Attribute

It Specifies how to send the form data to a web server. The data can be sent as URL variables, by using the get method or as HTTP post, by using the post method.

  • GET(default)
  • POST

GET

GET sends the data as part of the URL.

  • Appends form-data into the URL in name/value pairs.
  • The length of a URL is limited 2048 characters.
  • Never use GET method if you have password or other sensitive information to be sent to the server.
  • Useful for form submissions where a user want to bookmark the result.
  • GET is better for non-secure data, like query strings in Google.
  • GET can’t be used to send binary data, ex:-  images or word documents.
<form action=“some.php” method = “GET”>

If we use an invalid value for the method attribute of the <form> tag, the browser will use the default value GET.

POST

HTTP POST requests supply additional data from the client (browser) to the server in the message body.

  • Appends form-data inside the body of the HTTP request (data is not shown is in URL).
  • The POST method does not have any restriction on data size to be sent.
  • Form submissions with POST cannot be bookmarked.
  • The POST method can be used to send ASCII as well as binary data. Ex:-  image and word documents etc.
  • The data sent by POST method goes through HTTP header so security depends on HTTP protocol. By using Secure HTTP you can make sure that your information is secure.
  • POST is a little safer than GET because the parameters are not stored in browser history or in web server logs.
<form action=“some.php” method = “POST”>
GETPOST
BACK button/ReloadHarmlessData will be re-submitted (the browser should alert the user that the data are about to be re-submitted)
BookmarkedCan be bookmarkedCannot be bookmarked
CachedCan be cachedNot cached
Encoding typeapplication/x-www-form-urlencodedapplication/x-www-form-urlencoded or multipart/form-data. Use multipart encoding for binary data
HistoryParameters remain in browser historyParameters are not saved in browser history
Restrictions on data typeOnly ASCII characters allowedNo restrictions. Binary data is also allowed
VisibilityData is visible to everyone in the URLData is not displayed in the URL

Name  Attribute

Specifies a name used to identify the form. It is Used to give a name to the control which is sent to the server to be recognized and get the value. name=“lastname”

novalidate

If we use novalidate attribute in form tag then the validation will not take place, even if there is a required filed.

<form novalidate>
<form novalidate=“novalidate”> 
<form novalidate=“true”> 

There is one more tag formnovalidate which is used by input tag to speficiy novlidate this particular text or field we will study about this later.

Text Direction (dirname)

Specifies that the text direction will be submitted

ValueDescription
ltrDefault. Left-to-right text direction
rtlRight-to-left text direction
autoLet the browser figure out the text direction, based on the content
<input type=“text” name=“city” dirname=“city.dir”>

Min and Max

number, range, date, datetime-local, month, time and week.

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

HTML: Object tag

The <object>…..</object> tag is used to embedded object within HTML document.

Ex: – audio, video, Java applets, ActiveX, PDF, and Flash etc.

<object> tag also used to embed another webpage into a HTML document.

The text between the <object> and </object> is an alternate text, for browsers that do not support this tag.

<param> tag is used to pass parameters to plugins that have been embedded with the <object> tag.

AttributeValueDescription
DataURLSpecifies the URL of the resource to be used by the object
TypeMedia typeSpecifies the media type of data specified in the data attribute
NameNameSpecifies a name for the object
HeightPixelsSpecifies the height of the object
WidthPixelsSpecifies the width of the object
Usemap#mapnameSpecifies the name of a client-side image map to be used with the object
FormForm_idSpecifies one or more forms the object belongs to
Tagged : / / /

HTML: Embed Tag

The <embed> tag is used to embed an audio file or video file on the web page. The <embed> tag defines a container for an external application or interactive content (a plug-in).

The <embed> the tag defines a container for an external resource, such as a web page, a picture, a media player, or a plug-in application.

AttributeValueDescription
srcURLSpecifies the path of the file name to play an audio or video file
typeMedia typeSpecifies the media type of the linked document
HeightPixelsSpecifies the height of the embedded content
WidthPixelsSpecifies the width of the embedded content

Noembed Tag:

The <noembed>…..</noembed> tag is used to handle browsers that do not support the <embed> tag. <noembed> tag specifies a message that you want to display in the browser. The message inside the <noembed> tag appears only when the browser doesn’t support the <embed> tag.

#This tag has been deprecated, should not be used in production.

Tagged : / / /

HTML: Source Tag

The <source> tag is used to embed two or more audio or video files of different media types. The browser may choose the type of file to play based on its media type or codec support.

<audio>
	<source>
	<source>
</audio>
Tagged : / / / / /

HTML: Video tag

The <video>…. </video> tag is used to play video files.

Supports: MP4, Ogg, WebM, etc.

AttributeValueDescription
autoplayautoplayPlay a video file immediately or automatically on the loading of  a web page
controlscontrolsDisplay the controls on a web page such as a play button etc
heightpixelsSets the height of the video player
looploopSpecifies that the video will start over again, every time it is finished
mutedmutedSpecifies that the audio output of the video should be muted
posterURLSpecifies an image to be shown while the video is downloading, or until the user hits the play button
preloadauto
metadata
none
Specifies if and how the author thinks the video should be loaded when the page loads
srcURLSpecifies the URL of the video file
widthpixelsSets the width of the video player
Tagged : / / / /

HTML: Comment

  • Simple Text Comment
<! - - HY! my name is html - - >
  • Code inside comment
<!- -
	<a href="https://www.google.com">Google</a>
	<p>
	Google is very important for us <br> 
	</a>
	- - >
  • Conditional Comment
<!--[if a>=b ]>   	
Text or Code Here
<![endif]-->

Tagged : / / / / / /