Scribd
Upload
14 views

Forms in HTML

The document discusses different types of HTML elements including inline elements like links and buttons that display on the same line and block elements like headings and paragraphs that start on a new line. It also covers HTML form elements like labels, text inputs, submit buttons, and select dropdowns that are used to collect user input in forms.

Uploaded by

riya joseph
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
14 views

Forms in HTML

The document discusses different types of HTML elements including inline elements like links and buttons that display on the same line and block elements like headings and paragraphs that start on a new line. It also covers HTML form elements like labels, text inputs, submit buttons, and select dropdowns that are used to collect user input in forms.

Uploaded by

riya joseph
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Types of Elements &Form tags

DAY 5
TYPES OF ELEMENTS

 INLINE ELEMENTS
 BLOCK ELEMENTS
1.INLINE ELEMENTS

 An inline element does not start on a new line.


 An inline element only takes up as much width as necessary.
 Eg:
<a>
<img>
<input>
<i>
<button>
These all display in line
2.BLOCK ELEMENTS

 A block-level element always starts on a new line, and the browsers


 automatically add some space (a margin) before and after the element.
 A block-level element always takes up the full width available.
 Eg:
<h1></h1>
<p></p>
<footer>
<form>
<main>
FORM

 form is used to collect user input. The user input is most often sent to a server for
processing.
 <form> element is used to create an HTML form for user input.
Eg: <form>
<!--form elements-->
</form>
FORM ELEMENTS

 <label>: It defines label for <form> elements or to display the text as label.
 <input>: It is used to get input data from the form in various types such as text,
password, email, etc by changing its type.
 <button>: It defines a clickable button to control other elements or execute a
functionality.
 <select>: It is used to create a drop-down list.
 <textarea>: It is used to get input long text content.
 <option>: It is used to define options in a drop-down list.
LABEL

 The <label> tag defines a label for many form elements.


 <lable for="">Username</label>
 Set the identifier (id) inside the <input> element and specify its name as a for attribute for
the <label> tag.

<label for="lfname">First name:</label>


<input id="lfname" name="fname" type="text" />
INPUT TAG

 An <input> element can be displayed in many ways, depending on the type attribute.
 <input type="text"> Displays a single-line text input field
 <input type="radio"> Displays a radio button (for selecting one of many choices)
 <input type="checkbox"> Displays a checkbox (for selecting zero or more of many
choices)
 <input type="submit"> Displays a submit button (for submitting the form)
 <input type="button"> Displays a clickable button
SUBMIT BUTTON

 -The <input type="submit"> defines a button for submitting the form data to a form-
handler.

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


or
 <button type="Submit"> Login</button>
REGISTRATION

 <input type="button">  <input type="radio">


 <input type="checkbox">  <input type="range">
 <input type="color">
 <input type="reset">
 <input type="date">
 <input type="search">
 <input type="email">
  <input type="submit">
<input type="file">
 <input type="hidden">  <input type="text">
 <input type="image">  <input type="time">
 <input type="month">  <input type="url">
 <input type="number">
 <input type="week">
 The default value of the type attribute is
"text".  <input type="password">
TASK
Task 2

You might also like