working with html forms

> form is collection/group of html elements

> by using <form> tag we can create html form(s) (mean
application form)
> web document/page it contains only one body, but a body
can contain multiple forms.
> form is used to submit input values(user’s data) to a server-
side program.
> forms are used to collect info from users, for ex: signup page,
singing page, user registration, product delivery info etc...
info we collected by using some controls (created by tag) like
text field, password, checkbox, radio button, combo-box, list
box, date, submit button, etc...
> form is a paired tag & block level
> form tag is sub tag of body tag
Syn: <form attributes >
UI designing
</form>
attributes:
1 action : url represents destination program address or
which program we want to call specify here
diff forms of urls:
https://www.irctc.co.in
https://www.sitename.com/login.class|login.aspx|login.php|
login.ns|login.cgi|login.py
"" self-calling (its calling/sending data to current prog)
"." home of current application
 2 method : it represents the way of sending data from client
to server
it supports two ways, those are
get:
> it displaying data in address bar
https://www.redbus.in/search?
fromCityName=Hyderabad&toCityName=Guntur&onward=24-
Dec-2020&opId=0&busType=Any
> get method stores user inputs in browser history
> it’s not more secured
> get is a default method
> we can bookmark these pages
> get methods max data limit is 2048kb
> get is faster than post
use-case's 🡺 search page, retrieving data from db, ...
Post:
> it not displaying any data in address bar
https://www.redbus.in/search
 > post method doesn’t store user inputs in browser
history
> it's more secured
> we can't bookmark these pages
> post method no limit
> post method slower than the get
use-case's 🡺 login page, sign-up page, registration pages, ...

3 target : its rep where to open destination page,

_self, _blank, parent, frame name ..
default is _self

4 enctype : it rep in which format we are sending data to

server
html support two types, those are
>application/x-www-form-urlencoded
If you want to send data to the server without
attachment and file uploading use this method.
 It is default option
>multipart/form-data
if u want send data to server with attachment and
file uploading

5 autocomplete : it automatically saves data while typing in

the UI (textbox, password, address, pincode, ....)
on/off
on is default

6 novalidate : while submitting html perform some basic

validation, if u don't do those validations, switch off this.
 form controls
input tag
> input tag is used create a form control (form elements)
> these controls are used to take input/accept data from users.
> controls nothing but text field, button, radio button, file,
color, password, etc...
> input is un-paired tag and inline element
Syn:
<input attributes/>

attributes of input tag:

1 type => it reps which type of control u want to create.
if we are not specified by default, it creates a textbox.
input type="text|hidden|password|number|button|reset|
submit|image|checkbox|radio|file|color|email|url|range|
date|time|datetime-local|month|week..."
2 name => it rep name of control used in server-side
programming (not unique)
 3 id => it rep id of control used in client-side programming
(unique)
4 value => it rep value of control
5 readonly => this attribute not allowed to change the value of
control
6 size => this attribute specifies size of control (width of
control)
7 disabled => this attribute disabled the control without typing
data
8 placeholder => this attribute used to display prompting text
with in the control
9 maxlength => this attribute used to set max limit of data
(no.of chars)
10 required => this attribute used to force the user to enter
data (mandatory field)
11 autofocus => this attribute set's cursor position (Default
location)
12 tabindex => this attribute controlling cursor movements
(when we r pressing tab key, where cursor is moving)
13 min
14 max
15 step

text field
>text field used for taking input(any type of data) from user or
text box allows us to type data.
>text fields are used for typing of username, firstname, pincode,
phone, address etc...
>by using "input" tag we can create textboxes
>user can type any no.of char's but single line, if u want to set a
limit use "maxlength" attribute.
>text field allows you to type data in 1 line.
Syn:
<input type="text" attributes>

Note:
id => used by client-side programming (javascript)
 => used in css also
=> unique (duplicate id are not)
name => used by server-side programming
(servlet/asp.net/php...)
=> either unique or not

hidden field
>an in-visible text field with default value is called a "hidden
field".
>hidden fields are used to send some information about
user/client to a server-side
program with asking the user.
>to perform session tracking, we are using hidden fields.
>these hidden field when you want to submit some fixed text
value to server(that don't want accept from user)
>like normal text fields, hidden fields data is also sent to the
server when we click the submit button.
Syn:
 <input type="hidden" name="NAME" value="VAL" attributes>

password control
> password is a text field but the data is not visible.
> it's used for accepting password, otp, verification code,
passcode... from the user.
> password is displayed as * or dot
Syn:
<input type="password" attributes>

number control
>this control used to accept only numerical value (numbers
only) from user
>it prevents typing of alphabets, special chars (in some
browsers), except – and e alphabet.
>but some browser allows to type all these data but given error
while submitting form
> some browsers displaying number fields with
increment/decrement buttons
SYn:
<input type="number" attributes>

attributes:
min => it rep starting value of number field (by default no min)
max => it rep ending value of number field (by default no max)
step => it rep increment/decrement value (by default +1/-1)

general button control

>button control is used to execute some code in the
background whenever the user clicked/pressed on that button.
>we can execute either JS or jQuery or Angular
>its standard button (not submit), it is unable to send requests
to the server.
> These buttons are used to perform some client-side
operations.
> these button values are not sent to the server.
Syn:
 <input type="button" value="VAL" attributes>

reset button
>reset is one type of button, used for reset the form/UI,
meaning it clears all values of form.
>reset button must be part of the "form" tag.
> these button values are not sent to the server.
Syn:
<input type="reset">

submit button
>submit is one type of button, used to submit/send the html
forms/page/UI to a server-side program.
>while submitting the html form, all input parameters (enter by
user), hidden parameter(by programmer) as a "Query String"
ex:
https://www.redbus.co.in/search.aspx ? param-
name=value&param-name=value &...
param-name => name of text box or name of password field
or name of button...
value => value of text box or value of password field or value
of button...
>outside the form, if we design anything that is not submitted
to the server and without name attribute also not submittable.
>submit button value also sent to server
Syn:
<input type="submit" value="VAL" attributes>

image button
> "image submit button" is used to submit a form to the server.
> when the user clicks on the image button, browser is
submitting data with x-co & y-co of image button
Syn:
<input type="image" src="filename" ...>
check box
>check boxes are used to allow the user to select some options,
for example product, class, color selection, sport selection,
select branch, select collage etc.
>whenever we want to select more than one option use check
box's
>if the checkbox is selected/checked it returns "on'' (true)
value, if the checkbox is unchecked it returns "off" (false) value.
selected => on (SSP), true (CSP)
non selected => off (SSP), false(CSP)
SYn:
<input type="checkbox" attributes>
Note: all check boxes should be created with the same name.
"checked" attribute of the check box makes the checkbox by
default checked, while opening the page.
Syn:checked="checked" before html5 ver
checked since html5 ver

radio button
> RB is used to display two or more options to the user, but
allows the user to select any one of them.
SYn:
<input type="radio" attributes>

Note:
> all RBs should be created with the same name.
> "checked" attribute of RB makes the RB by default selected,
while opening the page.

file
>file used to upload or attachment
>we can upload or attach any type of file, but @time a only one
file
Syn <input type="file" attributes>
attributes:
multiple => it allows multiple to upload @time
accept => filtering type of file
Note:
while uploading file method should be "post" and enctype is
"multipart/form-data"

color
>used to select color by user, selected color we can apply on
any control using JS
Syn: <input type="color">

date & time controls

date
>used to create a date box (date picker/popup calendar), where
the user can select a date.
>the browser by default provides a built-in date picker.
Syn: <input type="date" attributes>

time
>used to create a time box, where the user can enter/select
time (in the form of hours, minutes and seconds)
Syn:<input type="time" attributes>

datetime
>used to create a date-cum-time control
Syn: <input type="datetime-local" attributes>

month
>used to create a month box, where the user can select a
month.
Syn: <input type="month" ...>

week
>used to create a week box, where the user can select a week.
Syn: <input type="week" ...>

email
>used to create an email textbox, where the user can enter a
valid email id only.
>it displays an error message automatically (built-in validation),
if the user enters other than email id (should contain @ and .).
Syn: <input type="email" attributes>

url
>used to create an url box, where the user can enter a valid url
for downloading files or playing videos.
>it displays an error message automatically (built-in validation),
if the user enters other than url.
Syn: <input type="url" attributes>

range
>used to create a slider bar, based on the specific range.
>this control req min value and max value, if we are not
specified then browser takes default values.
Syn: <input type="range" attributes>
attributes
min => it sets min value of slider
max => it sets max value of slider
step => it sets increment value
value => sets indicator init position
appearance: slider-vertical;
search
> used to create a search box, where the user can enter some
search text, it also displays a clear button to clear the text inside
the search box.
Syn: <input type="search" ... >

dropdown list (combo box)

>using the "select" tag we can create a dropdown list/CB.
>dropdown list is used to display a few options/items to the
user and allows the user to select any one of them.
> "option" sub tag of "select" tag.
> "option" tag used to create/to add items/options to
dropdown list.
> both are paired tags.
Syn:<select attributes>
<option attributes> Text </option>
<option> Text </option>
...
 </select>
new Syn:
<option> Text </option>
<option value="ws" > text </option>
Note: by default, DDB is displaying 1st added option/tiem
attributes:
selected : this attribute of "option" tag, used to change
default selected option/item of DDB

list box
>using the "select" tag we can create a list box.
>list box is used to display some options/items to the user and
allows the user to select any one of them (by default).
> "option" sub tag of "select" tag.
> "option" tag used to create/to add items/options to the list
box.
> "size" attribute used to change DDB into List box.
Syn:<select size="N" attributes>
 <option attributes> Text </option>
<option> Text </option>
<option> Text </option>
...
</select>
Note: by default DDB is displaying 1st added option
attributes:
selected : this attribute of "option" tag, used to change
default selected option/item of DDB
multiple :it allows user to select more than one option @time
size :attribute used to change DDB into List box and no.of
options to display @time

option groups
> "optgroup" tag is used to group-up some options/items inside
the "select" tag.
> one "select" tag can contain many "optgroup" tags, the
"optgroup" tag contains many "options".
>its paired tag
> "optgroup" tag is the sub tag of "select" tag.
Syn:
<select>
<optgroup label="Text">
<option> .. </option>
<option> .. </option>
<option> .. </option>
</optgroup>
<optgroup>
...
</optgroup>
</select>

textarea
>"textarea" tag is used to create a multi-line textbox.
use case: comments, address, feedback, delivery instr, ...
>its paired tag
>it creates a multi-line text box, with default sizes. (2row & 20
col)
Syn: <textarea attributes>
init value
</textarea>

attributes:
rows : it rep no.of lines to display @time, if more lines of data
entered
automatically scrollbar is activated.
cols : it rep no.of chars per line
maxlength : it rep total no.of chars allowed in textbox.
Note: user can resize the textarea, at runtime in the browser.
progress bar
> "progress" tag is used to display the progress of a task.
> to move progress bar dynamically, we have to use "JS"
> it is a paired tag.
SYn: <progress attributes> </progress>
attributes:
min max value

label

> label tag is used to create heading/prompting messages for

elements or controls.

> label providing description for controls, it gives an idea to user

what we have to type.

> when the user clicks on the label, the cursor will appear in the
associated control automatically.

>its paired tag.

SYn: <label attributes> text </label>

attributes

for : used to specify the id of the control that is associated with

the control

Note: labels are not sent to the server while submitting the
form.

HTML5 tags
output tag

> this tag used to print data/output value on webpage.

> it is paired & inline element.

Syn <output attributes> text </output>

details and summary

>details and summary tags are used to allow the user to

expand/collapse some information, when the user clicks on the
heading.

>both are paired

> details tag is the main tag and summary is the sub tag of
details tag.

Syn:

<details>

<summary>Text</summary>

information

</details>

header

>"header" tag represents header bar, which may include

website logo, search box, main links, etc...

>it doesn’t provide any styles by default; we have to apply

styles manually, using CSS.

>its paired tag.

Syn: <header>

place header content here

</header>
nav

>"nav" tag represents navigation bar, which may include top

navigation menus.

>it doesn’t provide any styles by default; we have to apply

styles manually, using CSS.

>its paired tag.

Syn: <nav>

place menus/links here

</nav>

section

>"section" tag represents a specific section of the page(box or

container), which may include main-content/information.

>it doesn’t provide any styles by default; we have to apply

styles manually, using CSS.

>its paired tag.

Syn: <section>

place main content here

 </section>

footer

>"footer" tag represents the footer part of the web page, which
may include information of contact, faqs, location, copyrights,
etc...

>it doesn’t provide any styles by default; we have to apply

styles manually, using CSS.

>its paired tag.

Syn: <footer>

place footer content here

</footer>

aside

>"aside" tag represents the "right-side" part of the web page,

which may contain ads/other promotional information.

>it doesn’t provide any styles by default; we have to apply

styles manually, using CSS.

>its paired tag.

Syn: <aside>

place ads/extra info here

</aside>

Audio tag

The <audio> is one of the HTML5 elements added to allow

embedding audio files to a web page. Since not all browsers
support all audio formats, the audio file is encoded using special
codecs.

The <source> tag or the src attribute is used to indicate the

variations of the same audio file. The path to an audio file can
contain absolute or relative URLs.

Syn:-

<audio attributes> </audio>

OR

<audio attributes>

<source src="a.mp3" type="audio/mp3">

<source src="a.mpeg" type="audio/mpeg">

 <source src="a.wav" type="audio/wav">

</audio>

Attribute Definition

src URL => Specifies the path to the audio file.

controls Displays the control panel (start button, scroll, volume

control).

If the controls attribute is missing, the audio file will

not be

displayed on the page.

autoplay Plays the audio file automatically after loading the

page.

loop Repeat the audio file from the beginning after its
completion.

muted Mutes the sound when the audio file is played.

Video tag

The <video> is one of the HTML5 elements added to allow

embedding video files to a web page. Since not all browsers
support all audio formats, the audio file is encoded using special
codecs.

The <source> tag or the src attribute is used to indicate the

variations of the same audio file. The path to an audio file can
contain absolute or relative URLs.

Syn:-

<video attributes> </video>

OR

<video attributes>

<source src="filename" type="video/mp4">

...

</video>

Attribute Definition

src URL => Specifies the path to the video file.

controls Displays the control panel (start button, scroll, volume

control).
 If the controls attribute is missing, the video file will
not be

displayed on the page.

autoplay Plays the audio file automatically after loading the

page.

loop Repeats continuously the audio file from the

beginning after its

completion.

muted Mutes the sound when the audio file is played.

width width of video player

height height of video player

poster to set wall poster/paper of video

iframe

> "iframe" stand for inline-frame, html5 rel tag

> placing one webpage result within another webpage.

> its paired tag

Syn:

<iframe attributes>

</iframe>

att:

src => which page we want to include

srcdoc => it displaying text

width =>

height =>

frameborder => disable/enable border

map tag

> this is used to map an img to other images or webpages.

> map tag used to explore internal details about par area of img

> area is sub tag map tag

> area tag used to create mapping co-ordi

> map tag should link img tag ny using "usemap" attribute of
img

> map is paired and area is non-paired

Syn:

<img src="image">

<map name="">

<area shape="" href="" coords="" alt="">

<area shape="" href="" coords="" alt="">

...

</map>

Shape: it rep mapping area shape.

it sup 3 shapes, those are

> circle

> rect

> poly

Href its destination url or image

coords shape x and y co-ords

https://www.image-map.net/

marquee tag

> used to move text/element in different directions

> its deprecated tag.

> its paired tag

Syn:

<marquee attributes> text|img| component </marquee>

attributes:

direction => down, up, left (default), right

loop => continues moving (default)

scrollamount => 6

scrolldelay => 84ms

behavior => alternate

meta

> data about data means we provide some info/details about a

webpage.

> meta is unpaired

> meta is subtag of <head> tag

> by using meta we provide info to browser, search engines,

users.

> RWD