Scribd
Upload
17 views55 pages

2HTML Forms Latest1

HTML (Hyper Text Markup Language) is a standard markup language used for creating web pages and is independent of operating systems. It consists of elements represented by tags, which describe the structure of web pages, including document type, title, head, and body. HTML also supports user input through forms and various input types, such as text fields, checkboxes, and radio buttons, allowing for interactive web applications.

Uploaded by

rohitreddyidk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views55 pages

2HTML Forms Latest1

HTML (Hyper Text Markup Language) is a standard markup language used for creating web pages and is independent of operating systems. It consists of elements represented by tags, which describe the structure of web pages, including document type, title, head, and body. HTML also supports user input through forms and various input types, such as text fields, checkboxes, and radio buttons, allowing for interactive web applications.

Uploaded by

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

HTML

HTML  Hyper Text Markup Language

It is a standard markup language for creating Web pages.

It is an interpreter based language.

HTML is independent of OS.

It is a browser understandable language.

Every browser has interpreter to interpret HTML.

It is a language used for presenting results with good look and feel.

It is used to develop GUI for end users.

It is used for browser based outputs.

HTML describes the structure of Web pages using markup

HTML elements are the building blocks of HTML pages

HTML elements are represented by tags

Browsers do not display the HTML tags, but use them to render the content of the page

Structure of HTML script:

1) Document Type
2) Title
3) Head
4) Body

HTML Basics:

HTML Documents

All HTML documents must start with a document type declaration:


<!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Sample script with title:

Eg:

<!DOCTYPE HTML>

<html>

<head>

<title>this is my first title </title>

</head>

</html>

HTML Comments

<!-- Write your comments here -->

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading.

<h6> defines the least important heading:

Eg:

<!DOCTYPE HTML>

<html>
<head>

<title>My first page</title>

</head>

<body>

<h1> First header </h1>

<h2> Second header </h2>

<h3> Third header </h3>

<h4> Fourth header </h4>

<h5> Fifth header </h5>

<h6> Sixth header </h6>

</body>

</html>

Commenting multiple lines .

<!- -

This is

Multiple lines

commenting

- ->

Eg:

<!DOCTYPE HTML>

<html>
<head>

<title>My first page</title>

</head>

<body>

<h1> First header </h1>

<h2> Second header </h2>

<!--

<h3> Third header </h3>

<h4> Fourth header </h4>

<h5> Fifth header </h5>

<h6> Sixth header </h6>

-->

</body>

</html>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

Eg:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>
</head>

<body>

<p>

<h1>

My first paragraph.

hello this is html.

hello I am learning html.

</h1>

</p>

<p>

<h2>

My second paragraph.

hello I am in second paragraph.

Hello end of second paragraphs.

</h2>

</p>

</body>

</html>

HTML line break tag <br>  to get next line.

Eg:
<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<p>

<h1>

My first paragraph.<br>

hello this is html. <br>

hello I am learning html. <br>

</h1>

</p>

<p>

<h2>

My second paragraph. <br>

hello I am in second paragraph.<br>

Hello end of second paragraphs. <br>

</h2>

</p>

</body>
</html>

HTML Forms:
Forms are user interface, which is used to collect user input.

The <form> Element


The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>

An HTML form contains form elements.

Form elements are different types of input elements, like text fields,
checkboxes, radio buttons, submit buttons, and more.

The <input> Element

The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending on


the type attribute.

HTML Input Types


Here are the different input types you can use in HTML:

 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">

If the type attribute is omitted, the input field gets the default
type: "text".

Eg:

<!DOCTYPE HTML>

<html>

<head>

<title>Rigistration form </title>

</head>

<body>

<h1> Rigistration Form </h1>

<form >

First Name <input /> <br>

Last Name <input /> <br>

</form>
</body>

</html>

Text Input
<input type="text"> defines a one-line input field for text input:

Eg:

<!DOCTYPE HTML>

<html>

<head>

<title>Rigistration form </title>

</head>

<body>

<h1> Rigistration Form </h1>

<form>

First Name <input type="text" /> <br>

Last Name <input type="text" />

</form>

</body>

</html>

Result:
Text filed attributes:

Name attribute.

<input type="text" name="fname" />

Value attribute .

Used for default value.

<input type="text" name="fname" value="Nageswar Rao"/>

Eg:

<!DOCTYPE HTML>
<html>
<head>
<title>Rigistration form </title>
</head>
<body>
<h1> Rigistration Form </h1>
<form >
First Name <input type = "text" name = "fname" value = "Nageswar Rao"/> <br>
Last Name <input type = "text" name = "lname" value = "Mandru"/> <br>

</form>

</body>
</html>
Radio Button Input
<input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices ( single
selection )

<input type="radio" name="gender" value="male" checked>

Eg:

<!DOCTYPE html>

<html>

<body>

<h2>Radio Buttons</h2>

<form>

<input type="radio" name="gender" value="male" checked> Male<br>

<input type="radio" name="gender" value="female"> Female<br>

<input type="radio" name="gender" value="other"> Other

</form>

</body>

</html>
Description for the above:

<input type="radio" name="gender" value="male" checked> Male<br>

type="radio"  input type

" name="gender"  it must be same for all as all radio buttons are under a single group.

Value = “male”  it is default value for that group

Checked  default selection

Male<br>  it is a label.

Input Type Checkbox


<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of


choices.

<!DOCTYPE html>

<html>

<body>

<form action="">

<h1>You can chose mutliple items form below </h1>


<input type="checkbox" name = "house" value="house"> I have a house <br>

<input type="checkbox" name ="car" value="car"> I have a car <br>

<input type="checkbox" name="bike" value="bike"> I have a bike <br>

<input type="checkbox" name="computer" value="computer"> I have a laptop <br>

<br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>
Default selection: checked

<!DOCTYPE html>

<html>

<body>

<form action="">

<h1>You can chose mutliple items form below </h1>

<input type="checkbox" name = "house" value="house" > I have a house <br>

<input type="checkbox" name ="car" value="car" > I have a car <br>

<input type="checkbox" name="bike" value="bike" checked > I have a bike <br>

<input type="checkbox" name="computer" value="computer" checked> I have a laptop <br>

<br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>
The Submit Button
<input type="submit"> defines a button for submitting the 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="submit" value="Submit">

Eg:

<!DOCTYPE HTML>
<html>
<head>
<title>Rigistration form </title>
</head>
<body>
<h1> Rigistration Form </h1>
<form >
First Name <input type = "text" name = "fname" value = "Nageswar Rao"/> <br>
Last Name <input type = "text" name = "lname" value = "Mandru"/> <br>

<input type="submit" value="Submit">


</form>

</body>
</html>

The Action Attribute


The action attribute defines the action to be performed when the form is
submitted.

Normally, the form data is sent to a web page on the server when the user
clicks on the submit button.

In the example above, the form data is sent to a page on the server called
"/registrationDetails ". This page contains a server-side script that handles the
form data:

<form action="/registrationDetails ">

If the action attribute is omitted, the action is set to the current page.
The Target Attribute
The target attribute specifies if the submitted result will open in a new browser
tab, a frame, or in the current window.

The default value is "_self" which means the form will be submitted in the
current window.

To make the form result open in a new browser tab, use the value " _blank":

<form action="/action_page.php" target="_blank">

Other legal values are "_parent", "_top", or a name representing the name of
an iframe.

" target="_self"

<form action="" target="_self" >

Eg:

<!DOCTYPE HTML>

<html>

<head>

<title>Rigistration form </title>

</head>

<body>

<h1> Rigistration Form </h1>

<form action="" target="_self">


First Name <input type = "text" name = "fname" value = "Nageswar Rao"/> <br>

Last Name <input type = "text" name = "lname" value = "Mandru"/> <br>

<input type="submit" value="Submit">

</form>

</body>

</html>

Target = _blank

<form action="" target="_blank">

Eg:

<!DOCTYPE HTML>

<html>

<head>

<title>Rigistration form </title>

</head>

<body>

<h1> Rigistration Form </h1>

<form action="" target="_blank">

First Name <input type = "text" name = "fname" value = "Nageswar Rao"/> <br>

Last Name <input type = "text" name = "lname" value = "Mandru"/> <br>
<input type="submit" value="Submit">

</form>

</body>

</html>

The Method Attribute


The method attribute specifies the HTTP method (GET or POST) to be used
when submitting the form data:

<form action="/action_page" method="GET">

Using metho=”GET”

Eg:

<!DOCTYPE HTML>

<html>

<head>

<title>Rigistration form </title>

</head>

<body>

<h1> Rigistration Form </h1>

<form action="" method="GET" target="_blank">

First Name <input type = "text" name = "fname" value = "Nageswar


Rao"/> <br>

Last Name <input type = "text" name = "lname" value = "Mandru"/>


<br>
<input type="submit" value="Submit">

</form>

</body>

</html>

Browser new tab opens and below is request URL:

file:///D:/NRIT_HTML/test.htm ? fname=Nageswar+Rao&lname=Mandru

fname=Nageswar+Rao&lname=Mandru

input data is visible to end user

Using method=”POST”

<!DOCTYPE HTML>

<html>

<head>

<title>Rigistration form </title>

</head>

<body>

<h1> Rigistration Form </h1>

<form action="" method="POST" target="_blank">


First Name <input type = "text" name = "fname" value = "Nageswar
Rao"/> <br>

Last Name <input type = "text" name = "lname" value = "Mandru"/>


<br>

<input type="submit" value="Submit">

</form>

</body>

</html>

On submitting form data is not visible to end user.

Notes on GET:

 Appends form-data into the URL in name/value pairs


 The length of a URL is limited
 Never use GET to send sensitive data! (will be visible in the URL)
 Useful for form submissions where a user wants to bookmark the result
 GET is better for non-secure data, like query strings in Google

When to Use POST?

Always use POST if the form data contains sensitive or personal information.
The POST method does not display the submitted form data in the page address
field.

Notes on POST:

• POST has no size limitations, and can be used to send large amounts of
data.

• Form submissions with POST cannot be bookmarked

Difference between method= GET / POST:


Features GET POST
Sending of data Client data is appended to URL Client data is sent implicitly
and sent
Storing in Browser As data is appended, the client As data is sent implicitly, the client
History data is stored in browser history data is not stored in browser history
Bookmark The URL with client data can be Not possible to bookmark
bookmarked. Thereby, later
without filling the HTML form,
the same data can be sent to server
Limitation of data Limited to 2048 characters Unlimited data
sent (browser dependent)
Hacking easiness Easy to hack the data as data is Difficult to hack
stored in browser history
Type of data sent Only ASCII data can be sent Any type of data can be sent
including binary data
Data secrecy Data is not secret as other people Data is secret as not stored in history
can see the data in browser history
When to be used Prefer when data sent is not secret. Prefer for critical and sensitive data
Do not use for passwords etc. like passwords etc.
Default Relatively faster as data is A separate message body is to be
appended to URL created

Which is to be preferred – GET or POST?

It depends on your application need. If client data includes only ASCII characters, no secrecy
and limited to 2KB length (depends on the browser), then prefer GET, else POST

Input Type Password


<input type="password"> defines a password field:

Eg:

<!DOCTYPE HTML>
<html>

<head>

<title>Rigistration form </title>

</head>

<body>

<h1> Rigistration Form </h1>

<form action="">

First Name <input type = "text" name = "fname" value = "Nageswar Rao"/> <br>

Last Name <input type = "text" name = "lname" value = "Mandru"/> <br>

Preferred Id <input type="text" name = "mailid" value = "[email protected]" /><br>

Password <input type="password" name= "passwd" /><br>

Retype Password <input type="password" name= "repasswd" /><br>

<input type="submit" value="Submit" />

</form>

</body>

</html>
Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to
their default values:

<!DOCTYPE HTML>

<html>

<head>

<title>Rigistration form </title>

</head>

<body>

<h1> Rigistration Form </h1>

<form action="">

First Name <input type = "text" name = "fname" value = "Nageswar Rao"/> <br>

Last Name <input type = "text" name = "lname" value = "Mandru"/> <br>

Preferred Id <input type="text" name = "mailid" value = "[email protected]" /><br>

Password <input type="password" name= "passwd" /><br>

Retype Password <input type="password" name= "repasswd" /><br>

<input type="submit" value="Submit" />

<input type="reset" value="Reset" />

</form>

</body>

</html>
The <select> Element
The <select> element defines a drop-down list:

<!DOCTYPE html>

<html>

<body>

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<form action="">

<select name="category">

<option value="Software Engineer">Software Engineer</option>

<option value="Mechanical Engineer">Mechanical Engineer</option>


<option value="Mathmetics and Science">Mathmetics and
Science</option>

<option value="Electronics Engineer">Electronics Engineer</option>

<option value="Doctor">Doctor</option>

<option value="Lawyer">Lawyer</option>

</select>

<br><br>

<input type="submit">

</form>

</body>

</html>

The <option> elements defines an option that can be selected.

By default, the first item in the drop-down list is selected.


To define a pre-selected option, add the selected attribute to the option:

<option value="Mechanical Engineer" selected >Mechanical Engineer</option>

<!DOCTYPE html>

<html>

<body>

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<form action="">

<select name="category">

<option value="Software Engineer" >Software Engineer</option>

<option value="Mechanical Engineer" selected >Mechanical


Engineer</option>

<option value="Mathmetics and Science">Mathmetics and


Science</option>

<option value="Electronics Engineer">Electronics Engineer</option>

<option value="Doctor">Doctor</option>

<option value="Lawyer">Lawyer</option>

</select>

<br><br>

<input type="submit">

</form>
</body>

</html>

Visible Values:
Use the size attribute to specify the number of visible values:

Eg:

<!DOCTYPE html>

<html>

<body>

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<form action="">

<select name="category" size="4">

<option value="Software Engineer" >Software Engineer</option>

<option value="Mechanical Engineer" selected >Mechanical


Engineer</option>

<option value="Mathmetics and Science">Mathmetics and


Science</option>

<option value="Electronics Engineer">Electronics Engineer</option>

<option value="Doctor">Doctor</option>

<option value="Lawyer">Lawyer</option>
</select>

<br><br>

<input type="submit">

</form>

</body>

</html>

Allow Multiple Selections:


Use the multiple attribute to allow the user to select more than one value:

<!DOCTYPE html>

<html>

<body>
<form action="">

<h1>You can chose mutliple items form below </h1>

<select name="food" size="4" multiple>

<option value="rice" selected >Rice</option>

<option value="curry1" >Curr1</option>

<option value="curry2" >Curr2</option>

<option value="curd" >Curd</option>

<option value="pickle">Pickle</option>

<option value="bannana">Bannana</option>

<option value="Soft Drink">Soft Drink</option>

</select>

<br><br>

<input type="submit">

</form>

</body>

</html>
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):

<textarea name="message" rows="10" cols="30">Initial text.</textarea>

Eg:

<!DOCTYPE html>

<html>

<body>

<form action="">

<textarea name="message" rows="10" cols="30">This is Nageswar Rao,


Having 20 years of exepreince in the Software field </textarea>

<input type="submit">

</form>

</body>
</html>

The <button> Element


The <button> element defines a clickable button:

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

<!DOCTYPE html>

<html>

<body>

<form action="">

<h1>Click on below button for alert </h1>

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

</form>

</body>

</html>

Alert()  is methods in java script to display message with popup window.


HTML5 Input Types
HTML5 added several new input types:

 color
 date
 datetime-local
 email
 month
 number
 range
 search
 tel
 time
 url
 week

Input Type Color


The <input type="color"> is used for input fields that should contain a color.

Depending on browser support, a color picker can show up in the input field.
<!DOCTYPE html>

<html>

<head>

<title>Color Picker </title>

</head>

<body>

<form action="">

<h1>Select Favorite Color </h1>

<input type="color" name="favcolor" />

<input type="submit" value="Submit"/>

</form>

</body>

</html>
Input Type Date
The <input type="date"> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

<!DOCTYPE html>

<html>

<body>

<form action="">

Select Birth Date <br>

<input type="date" name="bdate" />

<input type="submit" value="Submit"/>

</form>

</body>

</html>
You can also use the min and max attributes to add restrictions to dates:

<!DOCTYPE html>

<html>

<body>

<form action="">

Enter a date before 1980-01-01:<br>

<input type="date" name="bday" max="1979-12-31"><br><br>

Enter a date after 2000-01-01:<br>

<input type="date" name="bday" min="2000-01-02"><br><br>

<input type="submit">

</form>

</body>

</html>
Input Type Datetime-local
The <input type="datetime-local"> specifies a date and time input field, with
no time zone.

Depending on browser support, a date picker can show up in the input field.

<!DOCTYPE html>

<html>

<body>

<form action="">

Birthday (date and time):

<input type="datetime-local" name="bdaytime">

<input type="submit" value="Send">

</form>

</body>

</html>
Input Type Email
The <input type="email"> is used for input fields that should contain an e-
mail address.

Depending on browser support, the e-mail address can be automatically


validated when submitted.

Some smartphones recognize the email type, and add ".com" to the keyboard to
match email input.

<!DOCTYPE HTML>

<html>

<head>

<title>Registration Form</title>

</head>

<body>

<form action="/action_page.php">

E-mail:
<input type="email" name="email">

<input type="submit">

</form>

</body>

</html>

Input Type Month


The <input type="month"> allows the user to select a month and year.

Depending on browser support, a date picker can show up in the input field.

<!DOCTYPE HTML>

<html>

<head>

<title>Registration Form</title>

</head>

<body>
<form action="">

Birthday (month and year):

<input type="month" name="bdaymonth">

<input type="submit">

</form>

</body>

</html>

Input Type Number


The <input type="number"> defines a numeric input field.

You can also set restrictions on what numbers are accepted.

The following example displays a numeric input field, where you can enter a
value from 1 to 5:

<head>

<title>Registration Form</title>

</head>
<body>

<form action="">

Quantity (between 1 and 5):

<input type="number" name="quantity" min="1" max="5">

<input type="submit">

</form>

</body>

</html>
Input Restrictions
Here is a list of some common input restrictions (some are new in HTML5):

Attribute Description

disabled Specifies that an input field should be disabled

max 5 Specifies the maximum value for an input field

maxlength Specifies the maximum number of character for an input field

min 5 Specifies the minimum value for an input field

pattern 5 Specifies a regular expression to check the input value against

readonly Specifies that an input field is read only (cannot be changed)


required 5 Specifies that an input field is required (must be filled out)

size Specifies the width (in characters) of an input field

step 5 Specifies the legal number intervals for an input field

value Specifies the default value for an input field

min,max,step,value

The following example displays a numeric input field, where you can enter a
value from 0 to 100, in steps of 10. The default value is 30:

<head>

<title>Registration Form</title>

</head>

<body>

<form action="">

Quantity:

<input type="number" name="quantity"

min="0" max="100" step="10" value="30">

<input type="submit">
</form>

</body>

</html>

Input Type Range


The <input type="range"> defines a control for entering a number whose
exact value is not important (like a slider control). Default range is 0 to 100.
However, you can set restrictions on what numbers are accepted with
the min, max, and step attributes:

<!DOCTYPE html>

<html>

<body>

<h2>Range Field</h2>

<p>Depending on browser support:<br>The input type "range" can be displayed as a slider control.<p>

<!DOCTYPE HTML>

<html>
<head>

<title>Registration Form</title>

</head>

<body>

<form action="" method="get">

Points:

<input type="range" name="points" min="0" max="10">

<input type="submit">

</form>

</body>

</html>

Input Type Search


The <input type="search"> is used for search fields (a search field behaves
like a regular text field).
<!DOCTYPE HTML>

<html>

<head>

<title>Registration Form</title>

</head>

<body>

<form action="/action_page.php">

Search Google:

<input type="search" name="googlesearch">

<input type="submit">

</form>

</body>

</html>

Input Type Tel


The <input type="tel"> is used for input fields that should contain a
telephone number.

Note: The tel type is currently only supported in Safari 8.

<!DOCTYPE HTML>

<html>

<head>

<title>Registration Form</title>

</head>

<body>

<form action="/action_page.php">

Telephone:

<input type="tel" name="usrtel">

<input type="submit">

</form>

</body>

</html>
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.

<!DOCTYPE HTML>

<html>

<head>

<title>Registration Form</title>

</head>

<body>

<form action="/action_page.php">

Select a time:

<input type="time" name="usr_time">

<input type="submit">

</form>
</body>

</html>

Input Type Url


The <input type="url"> is used for input fields that should contain a URL
address.

Depending on browser support, the url field can be automatically validated


when submitted.

Some smartphones recognize the url type, and adds ".com" to the keyboard to
match url input.

<!DOCTYPE HTML>

<html>

<head>

<title>Registration Form</title>

</head>
<body>

<form action="">

Add your homepage:

<input type="url" name="homepage">

<input type="submit">

</form>

</body>

</html>

Input Type Week


The <input type="week"> allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

<!DOCTYPE HTML>

<html>
<head>

<title>Registration Form</title>

</head>

<body>

<form action="/action_page.php">

Select a week:

<input type="week" name="year_week">

<input type="submit">

</form>

</body>

</html>
HTML5 Form Elements
HTML5 added the following form elements:

 <datalist>
 <output>

Note: Browsers do not display unknown elements. New elements that are not
supported in older browsers will not "destroy" your web page.

HTML5 <datalist> Element


The <datalist> element specifies a list of pre-defined options for
an <input> element.

Users will see a drop-down list of the pre-defined options as they input data.

The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.

<html>

<body>

<h2>The datalist Element</h2>

<p>The datalist element specifies a list of pre-defined options for an input element.</p>

<form action="/action_page.php">

<input list="browsers" name="browser">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">
<option value="Opera">

<option value="Safari">

</datalist>

<input type="submit">

</form>

<p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p>

</body>

</html>

HTML5 <output> Element


The <output> element represents the result of a calculation (like one performed
by a script).

Example
Perform a calculation and show the result in an <output> element:

<!DOCTYPE html>
<html>

<body>

<h2>The output Element</h2>

<p>The output element represents the result of a calculation.</p>

<form action="/action_page.php"

oninput="x.value=parseInt(a.value)+parseInt(b.value)">

<input type="range" id="a" name="a" value="50">

100 +

<input type="number" id="b" name="b" value="50">

<output name="x" for="a b"></output>

<br><br>

<input type="submit">

</form>

<p><strong>Note:</strong> The output element is not supported in Edge 12 or Internet Explorer


and earlier versions.</p>

</body>

</html>

You might also like