Assignments Of Class 16: HTML5 Forms and New Input Types

Rashmi Mishra
4 minute read
0

Assignments Of Class 16

HTML5 Forms and New Input Types

Assignment 1: Create a Basic Form with Email and Password Fields

Objective: Create a simple login form with email and password fields using HTML5.

Instructions:

  • Create a form with an email field and a password field.
  • Use the required attribute for both fields.
  • Use the email type for the email field.

Solution:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Login Form</title>

</head>

<body>

    <form action="login.php" method="POST">

        <label for="email">Email:</label>

        <input type="email" id="email" name="email" required>

        <br>

        <label for="password">Password:</label>

        <input type="password" id="password" name="password" required>

        <br>

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

    </form>

</body>

</html>


Assignment 2: Create a Contact Form with a Phone Number Input

Objective: Create a contact form where users can enter their phone number using the tel input type.

Instructions:

  • Create a form with a name, email, and tel input fields.
  • The phone number field should only accept numbers.

Solution:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Contact Form</title>

</head>

<body>

    <form action="submit_contact.php" method="POST">

        <label for="name">Name:</label>

        <input type="text" id="name" name="name" required>

        <br>

        <label for="email">Email:</label>

        <input type="email" id="email" name="email" required>

        <br>

        <label for="phone">Phone:</label>

        <input type="tel" id="phone" name="phone" required>

        <br>

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

    </form>

</body>

</html>


Assignment 3: Create a Form for Selecting a Date and Time

Objective: Create a form with fields for selecting a date and time using HTML5 input types.

Instructions:

  • Add an input field for selecting a date.
  • Add an input field for selecting a time.

Solution:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Appointment Form</title>

</head>

<body>

    <form action="appointment.php" method="POST">

        <label for="appointment_date">Appointment Date:</label>

        <input type="date" id="appointment_date" name="appointment_date" required>

        <br>

        <label for="appointment_time">Appointment Time:</label>

        <input type="time" id="appointment_time" name="appointment_time" required>

        <br>

        <input type="submit" value="Book Appointment">

    </form>

</body>

</html>


Assignment 4: Create a Range Input for Volume Control

Objective: Create a form with a range input to control the volume level.

Instructions:

  • Add a slider for controlling the volume (range input).
  • The range should go from 0 to 100.

Solution:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Volume Control</title>

</head>

<body>

    <form action="volume.php" method="POST">

        <label for="volume">Volume:</label>

        <input type="range" id="volume" name="volume" min="0" max="100" value="50">

        <br>

        <input type="submit" value="Set Volume">

    </form>

</body>

</html>


Assignment 5: Create a Form for Selecting Multiple Files

Objective: Create a form to allow users to upload multiple files.

Instructions:

  • Create a file input with the multiple attribute.
  • Allow users to upload multiple files at once.

Solution:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>File Upload</title>

</head>

<body>

    <form action="upload.php" method="POST" enctype="multipart/form-data">

        <label for="files">Select files:</label>

        <input type="file" id="files" name="files[]" multiple>

        <br>

        <input type="submit" value="Upload Files">

    </form>

</body>

</html>


Assignment 6: Create a Form with a Color Picker

Objective: Create a form with a color picker input.

Instructions:

  • Create a form where users can choose their favorite color.

Solution:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Color Picker</title>

</head>

<body>

    <form action="color.php" method="POST">

        <label for="fav_color">Choose your favorite color:</label>

        <input type="color" id="fav_color" name="fav_color" value="#ff0000">

        <br>

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

    </form>

</body>

</html>


Assignment 7: Create a Form for Month and Year Selection

Objective: Create a form to select a specific month and year.

Instructions:

  • Add an input field for selecting a month.
  • Add an input field for selecting a year.

Solution:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Month and Year Selection</title>

</head>

<body>

    <form action="month_year.php" method="POST">

        <label for="month">Select Month:</label>

        <input type="month" id="month" name="month" required>

        <br>

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

    </form>

</body>

</html>


Assignment 8: Create a Form for Entering a Postal Code with Pattern Validation

Objective: Create a form to enter a postal code with a pattern validation for 6-digit codes.

Instructions:

  • Use the pattern attribute to ensure that the postal code follows a 6-digit format.

Solution:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Postal Code Form</title>

</head>

<body>

    <form action="postal_code.php" method="POST">

        <label for="postal_code">Postal Code:</label>

        <input type="text" id="postal_code" name="postal_code" pattern="\d{6}" title="Postal code must be 6 digits" required>

        <br>

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

    </form>

</body>

</html>


Assignment 9: Create a Survey Form with a Rating Scale (1-5)

Objective: Create a survey form where users can rate their experience on a scale of 1 to 5.

Instructions:

  • Use a range input to allow users to rate from 1 to 5.

Solution:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Survey Form</title>

</head>

<body>

    <form action="survey.php" method="POST">

        <label for="rating">Rate your experience (1 to 5):</label>

        <input type="range" id="rating" name="rating" min="1" max="5" value="3">

        <br>

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

    </form>

</body>

</html>


Assignment 10: Create a Form with an Autocomplete Feature

Objective: Create a form with the autocomplete attribute enabled for the email field.

Instructions:

  • Use the autocomplete attribute to enable the browser's autocomplete functionality for the email input.

Solution:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Auto-complete Form</title>

</head>

<body>

    <form action="autocomplete.php" method="POST">

        <label for="email">Email:</label>

        <input type="email" id="email" name="email" autocomplete="on" required>

        <br>

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

    </form>

</body>

</html>


These assignments will help solidify your understanding of HTML5 forms and input types. Let me know if you need further assistance!

4o mini

You said:

write 100 MCQs for the concept above with explanation

ChatGPT said:

ChatGPT

Here are 100 multiple-choice questions (MCQs) with explanations based on HTML5 Forms and New Input Types:

Post a Comment

0Comments

Post a Comment (0)