lder="enter your email" required="required">
</div>
<!-- Passwrod and confirm password -->
<div class="horizontal-group">
<div class="form-group left">
<label for="password" class="label-title">Password *</label>
<input type="password" id="password" class="form-input" placeholder="enter your password" required="required">
</div>
<div class="form-group right">
<label for="confirm-password" class="label-title">Confirm Password *</label>
<input type="password" class="form-input" id="confirm-password" placeholder="enter your password again" required="required">
</div>
</div>
<!-- Gender and Hobbies -->
<div class="horizontal-group">
<div class="form-group left">
<label class="label-title">Gender:</label>
<div class="input-group">
<label for="male">
<input type="radio" name="gender" value="male" id="male"> Male</label>
<label for="female">
<input type="radio" name="gender" value="female" id="female"> Female</label>
</div>
</div>
<div class="form-group right">
<label class="label-title">Hobbies</label>
<div>
<label>
<input type="checkbox" value="Web">Music</label>
<label>
<input type="checkbox" value="iOS">Sports</label>
<label>
<input type="checkbox" value="Andriod">Travel</label>
<label>
<input type="checkbox" value="Game">Movies</label>
</div>
</div> </div>
<!-- Source of Income and Income Amount -->
<div class="horizontal-group">
<div class="form-group left" >
<label class="label-title">Source of Income</label>
<select class="form-input" id="level" >
<option value="B">Employed</option>
<option value="I">Self-employed</option>
<option value="A">Unemployed</option>
</select>
</div> <div class="form-group right">
<label for="experience" class="label-title">Income</label>
<input type="range" min="20" max="100" step="5" value="0" id="experience" class="form-input" onChange="change();" style="height:28px;width:78%;padding:0;">
<span id="range-label">20K</span>
</div>
</div>
<!-- Profile picture and Age -->
<div class="horizontal-group">
<div class="form-group left" >
<label for="choose-file" class="label-title">Upload Profile Picture</label>
<input type="file" id="choose-file" size="80">
</div> <div class="form-group right">
<label for="experience" class="label-title">Age</label>
<input type="number" min="18" max="80" value="18" class="form-input">
</div>
</div>
<!-- Bio -->
<div class="form-group">
<label for="choose-file" class="label-title">Bio</label>
<textarea class="form-input" rows="4" cols="50" style="height:auto"></textarea>
</div>
<!-- form footer -->
<div class="form-footer">
<span>* required</span>
<button type="submit" class="btn">Create</button>
</div>

</body>
</html>

☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️☝️
HTML WEB SOURCE CODE TRY TO CODE THIS.
Please share and join this channel
https://telegram.me/codehtmlcss

Are you like this source code

<h1..h6> … </h1..h6>
Six different variations of writing a heading.
<h1> has the largest font size, while <h6> has
the smallest.
<div> … </div>
A webpage’s content is usually divided into
blocks, specified by the div tag.
<span> … </span>
This tag injects inline elements, like an image,
icon, emoticon without ruining the formatting
/ styling of the page.
<p> … </p>
Plain text is placed inside this tag.
<br/>
A line break for webpages. Is used when
wanting to write a new line.

<hr/>
Similar to the above tag. But in addition to
switching to the next line, this tag also draws
a horizontal bar to indicate the end
of the section.
Example
<div>
<h1>Top 5 Greatest Films</h1>
<p>These are considered the greatest
<span>reel-icon</span> of all time </p>
<hr/>
<h2>1. The Godfather</h2>
<p>This 1972 classic stars Marlon Brando and
Al Pacino.</p>
</div>

FORM
<form> … </form>
The parent tag for an HTML form.
action=”url”
The URL listed here is where the form data
will be submitted once user fills it.
method=””
It specifies which HTTP method (POST or GET)
would be used to submit the form.
enctype=””
Only for POST method, this dictates the data
encoding scheme to be used when form
is submitted.
autocomplete
Determines if the form has auto-complete enabled.
novalidate
Determines whether the form should be validated
before submission.
accept-charsets
Determines character encodings when form
is submitted.
target
After submission, the form response is displayed
wherever this refers to, usually has the following
values: _blank, _self, _parent, _top
<fieldset> … </fieldset>
Identifies the group of all fields on the form.
<label> … </label>
This is used to label a field in the form.
<legend> … </legend>
This operates as a caption for the <fieldset>
element.
<input />
This tag is used to take input from the user.
Input type is determined by a number of attributes.

INPUT TYPE ATTRIBUTE
type=””
Determines which type of input (text, dates,
password) is requested from the user.
name=””
Specifies the name of the input field.
value=””
Specifies the value contained currently in
the input field.
size=””
Determines the input element width
(number of characters).
maxlength=””
Specifies the most input field characters allowed.
required
Makes an input field compulsory to be filled by
the user. The form cannot be submitted if a required
field is left empty.
width=””
Determines the width of the input element,
in pixel values.
height=””
Determines the height of the input element,
in pixel values.
placeholder=””
Can be used to give hints to the user about the nature
of the requested data.
pattern=””
Specifies a regular expression, which can be used to
look for patterns in the user’s text.
min=””
The minimum value allowed for an <input> element.
max=””
The maximum value allowed for an <input> element.
autofocus
Forces focus on the input element when webpage
loads completely.
disabled
Disables the input element. User can no longer
enter data.

Exampe👇👇👇👇☝️☝️
<form action="form_submit.php" method="post">
<fieldset>
<legend>Bio:</legend>
First name:<br>
<input type="text" name="first-name"
value="John" placeholder="Please
enter your first name here"><br>
Last name:<br>
<input type="text" name="last-name"
value="Doe" placeholder="Please
enter your last name here"><br><br>
Favorite sport:<br>
<select>
<option value="soccer">Soccer
</option>
<option value="tennis">Tennis
</option>
<option value="golf">Golf
</option>
</select>
<textarea name="description">
</textarea>
<input type="submit" value="Submit">
</fieldset>
</form>

Please join and share our channel
https://telegram.me/codehtmlcss

What you want to learn about HTML just put it here @HTM_beginner_bot

👉HTML ATTRIBUTES

We have seen few HTML tags and their usage like heading tags <h1>, <h2>, paragraph tag
<p> and other tags. We used them so far in their simplest form, but most of the HTML tags
can also have attributes, which are extra bits of information.
An attribute is used to define the characteristics of an HTML element and is placed inside the
element's opening tag. All attributes are made up of two parts: a name and a value:
 The name is the property you want to set. For example, the paragraph <p> element
in the example carries an attribute whose name is align, which you can use to indicate
the alignment of paragraph on the page.

 The value is what you want the value of the property to be set and always put within
quotations. The below example shows three possible values of align attribute: left,
center and right.
Attribute names and attribute values are case-insensitive. However, the World Wide Web
Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4
recommendation.

Example
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>

👉CORE ATTRIBUTES
The four core attributes that can be used on the majority of HTML elements (although not all)
are:
 Id
 Title
 Class
 Style

👉The Id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML
page. There are two primary reasons that you might want to use an id attribute on an
element:
 If an element carries an id attribute as a unique identifier, it is possible to identify just
that element and its content.
 If you have two elements of the same name within a Web page (or style sheet), you
can use the id attribute to distinguish between elements that have the same name.
We will discuss style sheet in separate tutorial. For now, let's use the id attribute to distinguish
between two paragraph elements as shown below.

Example
<p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Cascading Style Sheet</p>

👉The title Attribute
The title attribute gives a suggested title for the element. They syntax for the title attribute
is similar as explained for id attribute:
The behavior of this attribute will depend upon the element that carries it, although it is often
displayed as a tooltip when cursor comes over the element or while the element is loading.

Example
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>

👉The class Attribute
The class attribute is used to associate an element with a style sheet, and specifies the class
of element. You will learn more about the use of the class attribute when you will learn
Cascading Style Sheet (CSS). So for now you can avoid it.
The value of the attribute may also be a space-separated list of class names. For example:
class="className1 className2 className3"

👉The style Attribute
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

Example
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style="font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>
At this point of time, we are not learning CSS, so just let's proceed without bothering much
about CSS. Here, you need to understand what are HTML attributes and how they can be
used while formatting content.

<table> … </table>
Marks a table in a webpage.
<caption> … </caption>
Description of the table is placed inside this tag.
<thead> … </thead>
Specifies information pertaining to specific
columns of the table.
<tbody> … </tbody>
The body of a table, where the data is held.
<tfoot> … </tfoot>
Determines the footer of the table.
<tr> … </tr>
Denotes a single row in a table.
<th> … </th>
The value of a heading of a table’s column.
<td> … </td>
A single cell of a table. Contains the actual
value/data.
<colgroup> … </colgroup>
Used for grouping columns together.
<col>
Denotes a column inside a table.

Example
<table>
<colgroup>
<col span="2">
<col>
</colgroup>
<tr>
<th>Name</th>
<th>Major</th>
<th>GPA</th>
</tr>
<tr>
<td>Bob</td>
<td>Law</td>
<td>3.55</td>
</tr>
<tr>
<td>Alice</td>
<td>Medicine</td>
<td>3.61</td>
</tr>
</table>

Simple website creating competition for HTML beginners
Our channel is preparing a website development competition for HTML beginners the competition is coding an HTML code for hotel booking it must be only riten by HTML and CSS becouse it is an exercise.
register at @codeadicted
https://telegram.me/codehtmlcss