# form In this module we will do the following: 1. Discuss the need for the form, label, and input tags. 2. Create a basic form. 3. Discuss fieldset and consolidating all items in a form together. 4. Discuss legend tag for creating nice looking heading in border. 5. Recreate form with radio buttons and checkboxes. ## File Location For this module, you should be working in the following location: ``` javascript-library └── 0-PreWork └── 1-HTML-Basics 09-form.html <---You should be here. └── 2-CSS-Basics └── 3-JavaScript-Basics └── 4-assets ``` ## Description It goes without saying, forms are everywhere on the web. From signing in to an application to ordering something on Amazon, we've all used forms. At some point as a new developer, you will work with forms. ## Sample Code Add the following sample code to your file: ```markup Forms

Forms

Basic Form with input field

``` ## Discussion We're starting to build on the foundation we've established, and you can probably see many of the subjects we've discussed starting to come together. In this file, we use `h1`, `h2`, `p`, `div` and, from the last lesson, `input`. We've started to describe our elements with a little more detail as well, using `attributes` on the input fields specifying the `type` that we want rendered. The result is that we're able to clearly state that we want a text box here, a checkbox there, and radio boxes in all the other places. \ \ With a solid grasp on these concepts, we're able to package elements inside of a `

` to describe a coherent collection of elements. `

` empowers us to group related elements even more tightly inside a form, and also gives us access to the `` tag, which is what defines a caption for the `

` element. \ \ Finally, the `

` tag provides a multi-line text input field. It's possible to specify the number of rows and columns within a given `<textarea>`. However, as you can see from our example, it's not necessary.

## Challenge

Try experimenting with the different elements we've just learned about and incorporating previous lessons into your efforts. Test adding `attributes` like `rows` to your `<textarea>` and see how that changes what's displayed.

## Extra Reading

[Great resource!](https://www.w3.org/TR/html401/interact/forms.html)

---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://eleven-fifty-academy.gitbook.io/javascript-100-prework-gitbook/javascript-library/0-prework/2-html-basics/form.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.