diff --git a/docs/html/forms/building-form.md b/docs/html/forms/building-form.md index 890703dbb..ffc8b740d 100644 --- a/docs/html/forms/building-form.md +++ b/docs/html/forms/building-form.md @@ -1,3 +1,218 @@ --- +id: building-forms +title: Building Forms in HTML +sidebar_label: Building Forms +sidebar_position: 1 +tags: [html, web-development, forms, user-input, front-end-development, web-design] +description: Learn how to create forms in HTML to collect user input effectively, with detailed examples and best practices. +--- + +Forms are an essential part of any website or web application. They allow users to interact with the website by providing input, such as text, selections, and buttons. Forms are used for various purposes, such as user registration, login, search, feedback, and more. + + + +In this tutorial, you will learn how to create forms in HTML to collect user input effectively. + +## Creating a Simple Form + +To create a form in HTML, you need to use the `
` element. The `` element is used to define an HTML form that collects user input. Here's an example of a simple form that collects the user's name and email address: + +```html title="index.html" showLineNumbers + + + + + + + Simple Form + + +

Simple Form

+ + + +

+ + +

+ +
+ + +``` + +In the example above: +- We have created a simple form that collects the user's name and email address. +- The `
` element contains two `` elements for the name and email fields. +- The `type="text"` attribute specifies that the input field is a text field. +- The `type="email"` attribute specifies that the input field is an email field, which helps in validating the email address. +- The `required` attribute specifies that the input field is required and must be filled out before submitting the form. +- The ` + ``` + + + +### `` element is used to create a dropdown list within a form. It allows the user to select one or more options from a list of predefined options. + +Here's an example of a ` + + + + +``` + +### ` +``` + +In the example above, the `rows` and `cols` attributes specify the number of rows and columns of the textarea, respectively. + +## Form Validation + +Form validation is an essential part of creating forms to ensure that the user input is correct and complete. HTML provides built-in form validation features that can be used to validate user input without writing custom JavaScript code. + +Here are some common form validation attributes that can be added to form elements: + +- **required:** Specifies that the input field is required and must be filled out. +- **minlength:** Specifies the minimum length of the input field. +- **maxlength:** Specifies the maximum length of the input field. +- **pattern:** Specifies a regular expression pattern that the input field must match. +- **type:** Specifies the type of input field (e.g., email, number, date). +- **min:** Specifies the minimum value for number and date input fields. + +Here's an example of a form with validation attributes: + +```html title="index.html" + + + +

+ + +

+ + +``` + +In the example above: + +- The `required` attribute specifies that both the username and password fields are required. +- The `minlength="3"` attribute specifies that the username must be at least 3 characters long. +- The `minlength="6"` attribute specifies that the password must be at least 6 characters long. + +When the user submits the form, the browser will automatically validate the input fields based on the specified attributes. If the input is invalid, the browser will display an error message to the user. + + + +:::tip Key Components +1. **`
` Tag** + - Defines the start and end of a form. + - Attributes: + - `action`: URL where form data is sent. + - `method`: HTTP method (e.g., `GET` or `POST`). + +2. **Input Elements** + - **Text Input (``)**: Single-line text input. + - **Email Input (``)**: Input validation for email addresses. + - **Textarea (` + + +
+``` + +By using the `form` attribute and other form attributes, you can create interactive and functional forms in HTML that collect user input and submit it to the server for processing. + + + +## Summary Table of Attributes + +| Attribute | Description | Example Value | +|-----------------|------------------------------------------------------------|---------------------------| +| `action` | URL to submit form data to | `/submit-data` | +| `method` | HTTP method (`GET`, `POST`) | `post` | +| `target` | Specifies where to display the response | `_blank`, `_self` | +| `autocomplete` | Enables/disables browser autofill | `on`, `off` | +| `novalidate` | Disables browser validation | `novalidate` (boolean) | +| `enctype` | Encoding type for form data | `multipart/form-data` | +| `name` | Unique identifier for the form | `registrationForm` | +| `accept-charset`| Character encodings supported | `UTF-8` | + + diff --git a/docs/html/forms/form-input-element.md b/docs/html/forms/form-input-element.md index e69de29bb..eb84d2da1 100644 --- a/docs/html/forms/form-input-element.md +++ b/docs/html/forms/form-input-element.md @@ -0,0 +1,352 @@ +--- +id: form-input-element +title: HTML Form Input Element +sidebar_label: Form Input Element +sidebar_position: 2 +tags: [html input element, html form input element, html input types, html input text, html input password, html input email] +description: "Learn about the HTML element and its various types such as text, password, email, etc., used to create input fields within a form." +keywords: [html input element, html form input element, html input types, html input text, html input password, html input email] +--- + +The `` element is used to create input fields within a form. It can be used to create text fields, checkboxes, radio buttons, buttons, and more. The `type` attribute of the `` element specifies the type of input field to be created. + + + +## Common Input Types + +Here are some common input types: + +1. **text:** Creates a single-line text input field. + + For example: + ```html + + ``` + +2. **password:** Creates a password input field where the entered text is masked. + + For example: + ```html + + ``` + +3. **email:** Creates an email input field that validates the input as an email address. + + For example: + ```html + + ``` + +4. **checkbox:** Creates a checkbox input field that allows the user to select multiple options. + + For example: + ```html + Coding + Design + ``` + +5. **radio:** Creates a radio button input field that allows the user to select a single option from a list. + + For example: + ```html + Computer Science + Engineering + ``` + +6. **submit:** Creates a submit button that submits the form data to the server. + + For example: + ```html + + ``` + +7. **button:** Creates a button that can be used to trigger JavaScript functions. + + For example: + ```html + + ``` + + + +## Additional Input Types + +In addition to the common input types mentioned above, there are several other input types that can be used to create different types of input fields. Here are some additional input types: + +1. **number:** Creates a numeric input field that allows the user to enter numbers. + + For example: + ```html + + ``` + +2. **date:** Creates a date input field that allows the user to select a date from a calendar. + + For example: + ```html + + ``` + +3. **file:** Creates a file input field that allows the user to upload files. + + For example: + ```html + + ``` + +4. **color:** Creates a color input field that allows the user to select a color from a color picker. + + For example: + ```html + + ``` + +5. **range:** Creates a range input field that allows the user to select a value from a range. + + For example: + ```html + + ``` + +6. **time:** Creates a time input field that allows the user to select a time. + + For example: + ```html + + ``` + +7. **url:** Creates a URL input field that validates the input as a URL. + + For example: + ```html + + ``` + +8. **search:** Creates a search input field that allows the user to enter search queries. + + For example: + ```html + + ``` + +9. **tel:** Creates a telephone input field that validates the input as a phone number. + + For example: + ```html + + ``` + +10. **hidden:** Creates a hidden input field that is not displayed on the form but is submitted with the form data. + + For example: + ```html + + ``` + +These input types provide a wide range of options for creating different types of input fields within a form. + + + +## Challenge Yourself + +### Problem description + +Create a form with the following input fields: + +1. A text input field for the user's name. +2. An email input field for the user's email address. +3. A password input field for the user's password. +4. A checkbox input field for the user's interests (e.g., coding, design). +5. A radio button input field for the user's major (e.g., Computer Science, Engineering). +6. A submit button to submit the form. +7. A button to clear the form. + +### Criteria + +1. Use appropriate input types for each input field. +2. Include labels for each input field. +3. Use the `name` attribute to identify each input field. +4. Use the `value` attribute for checkboxes and radio buttons. +5. Use the `required` attribute for required input fields. +6. Use the `form` attribute to associate the input fields with the form. +7. Use the `onclick` event to clear the form when the "Clear" button is clicked. +8. Use the `onsubmit` event to validate the form before submission. +9. Use CSS to style the form elements. + +### Solution + +You can try to create the form with the specified input fields and functionality. Here's an example solution to get you started: + +```html title="index.html" showLineNumbers + + + + + + + Form Challenge + + + +
+

Challenge Yourself

+
+ + + + + + + + + + + + + +
+ Select Your Interests + + + +
+ + +
+ Select Your Major + + + +
+ + +
+ + +
+
+
+ + + + +``` + +This example demonstrates how you can create a form with various input fields and functionality using HTML and CSS. You can further enhance the form by adding more styling, validation, or custom functionality based on your requirements. + +## Conclusion + +HTML provides a wide range of input types that you can use to create different types of input fields within a form. By understanding the various input types and their attributes, you can create interactive and user-friendly forms for collecting user input on your website. \ No newline at end of file