Scribd
Upload
103 views12 pages

Day 4

This book is about coding book

Uploaded by

thandarkyaw
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
103 views12 pages

Day 4

This book is about coding book

Uploaded by

thandarkyaw
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/ 12

HTML Form

HTML provides a variety of input types for collecting different types of user data in forms. Here
is a list of the HTML input types:

button

• A push button with no default behavior. Often used with JavaScript for custom functions.

checkbox

• A checkbox that allows the user to select one or more options from a set.

color

• An input for selecting a color. Displays a color picker when activated.

date

• An input for selecting a date. Displays a date picker.

datetime-local

• An input for selecting both date and time, without a timezone.

email

• An input for entering an email address. Provides validation for email format.

file

• An input for selecting one or more files from the user's device.

hidden

• An input that is not displayed in the browser. Used to store data that needs to be
submitted with the form but not shown to the user.

image

• An image submit button. Acts like a submit button but allows the use of an image as the
button.

month

• An input for selecting a month and year, without day or time.

1
number

• An input for entering a number. Provides controls for incrementing/decrementing the


value.

password

• An input for entering a password. Characters are masked for privacy.

radio

• A radio button. Allows the user to select one option from a set.

range

• An input for selecting a value from a range. Displays as a slider control.

reset

• A button that resets all form fields to their initial values.

search

• An input for entering search queries. Often styled and behaves similarly to a text input
but with additional search-specific features.

submit

• A button that submits the form data to the server.

tel

• An input for entering a telephone number. Provides a specific keyboard on mobile


devices.

text

• A basic text input field. The default input type.

time

• An input for selecting a time (hours and minutes).

url

• An input for entering a URL. Provides validation for URL format.

2
week

• An input for selecting a week and year, with no specific day or time.

1. All Inputs Type Form


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All Input Types Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
padding: 20px;
}

.container {
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {

3
text-align: center;
color: #333333;
}

label {
display: block;
margin-bottom: 8px;
color: #555555;
}

input,
select,
textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #cccccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type="submit"] {
background-color: #007BFF;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;

4
font-size: 16px;
}

input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>

<body>
<h1>All Input Types Form</h1>
<div class="container">
<form action="#">
<!-- Text input -->
<label for="text">Text:</label>
<input type="text" id="text" name="text" placeholder="Enter text">

<!-- Password input -->


<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter
password">

<!-- Email input -->


<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter email">

<!-- Telephone input -->


<label for="tel">Telephone:</label>
<input type="tel" id="tel" name="tel" placeholder="Enter phone number">
5
<!-- URL input -->
<label for="url">URL:</label>
<input type="url" id="url" name="url" placeholder="Enter URL">

<!-- Number input -->


<label for="number">Number:</label>
<input type="number" id="number" name="number" placeholder="Enter number">

<!-- Range input -->


<label for="range">Range:</label>
<input type="range" id="range" name="range" min="0" max="100">

<!-- Date input -->


<label for="date">Date:</label>
<input type="date" id="date" name="date">

<!-- Time input -->


<label for="time">Time:</label>
<input type="time" id="time" name="time">

<!-- Date and time input -->


<label for="datetime-local">Date and Time:</label>
<input type="datetime-local" id="datetime-local" name="datetime-local">

<!-- Color input -->


<label for="color">Color:</label>
<input type="color" id="color" name="color">

6
<!-- Checkbox input -->
<label for="checkbox">Checkbox:</label>
<input type="checkbox" id="checkbox" name="checkbox"> Check me

<!-- Radio buttons -->


<label for="radio">Radio:</label>
<input type="radio" id="radio1" name="radio" value="option1"> Option 1
<input type="radio" id="radio2" name="radio" value="option2"> Option 2

<!-- File input -->


<label for="file">File:</label>
<input type="file" id="file" name="file">

<!-- Select dropdown -->


<label for="select">Select:</label>
<select id="select" name="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>

<!-- Textarea -->


<label for="textarea">Textarea:</label>
<textarea id="textarea" name="textarea" rows="4" placeholder="Enter your
message"></textarea>

<!-- Submit button -->


<input type="submit" value="Submit">
7
</form>
</div>
</body>

</html>

2. Form for Beginners


HTML
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Form for Beginners</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<h1>Simple HTML Form</h1>
<div class="container">
<h2>Beginner's Form</h2>
<form action="#">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your name" required>

<label for="age">Age:</label>
<input type="number" id="age" name="age" placeholder="Your age" required>

8
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your email" required>

<label for="message">Message:</label>
<textarea id="message" name="message" placeholder="Type your message here"
required></textarea>

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


</form>
</div>
</body>

</html>
CSS
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
padding: 20px;
}

.container {
max-width: 500px;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
9
h1, h2 {
text-align: center;
color: #333333;
}

label {
display: block;
margin-bottom: 8px;
color: #555555;
}

input[type="text"],
input[type="number"],
input[type="email"],
textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #cccccc;
border-radius: 4px;
box-sizing: border-box;
}

textarea {
height: 100px;
}

10
input[type="submit"] {
background-color: #007BFF;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}

input[type="submit"]:hover {
background-color: #0056b3;
}

The id attribute in HTML is used to uniquely identify elements within the document. In the
provided code snippet, the id attribute plays a crucial role for several reasons:

Associating <label> with <input>:

o The for attribute of the <label> element is used to bind the label to a specific
form control. The value of the for attribute must match the id of the
corresponding <input> element. This association improves accessibility, making
it easier for screen readers to understand which label corresponds to which input
field.

JavaScript Interactions:

• The id attribute allows JavaScript to easily access and manipulate specific elements.
Using methods like document.getElementById("name"), you can dynamically change
the properties or behavior of the element with that id.

Styling with CSS:

• Although typically classes are used for styling multiple elements, id can be used in CSS
to apply unique styles to a single element. The id selector in CSS is denoted with a #.

Form Submission:

11
• While the id itself is not required for form submission, having unique identifiers for
input fields can help in client-side form validation and handling the form data efficiently.

12

You might also like