diff --git a/2ech18.md b/3ech18b.md index 83a169e..a26468a 100644 --- a/2ech18.md +++ b/3ech18b.md @@ -1,19 +1,10 @@ -# Chapter 18Forms and Form Fields +## Form fields -> I shall this very day, at Doctor's feast, -> My bounden service duly pay thee. -> But one thing!—For insurance' sake, I pray thee, -> Grant me a line or two, at least. -> -> <footer>Mephistopheles, <cite>in Goethe's Faust</cite></footer> +Forms were originally designed for the pre-JavaScript Web, to allow web sites to send user-submitted information in an HTTP request. This design assumes that interaction with the server always happens by navigating to a new page. -Forms were introduced briefly in the [previous chapter](17_http.html#http_forms) as a way to _submit_ information provided by the user over HTTP. They were designed for a pre-JavaScript Web, assuming that interaction with the server always happens by navigating to a new page. +But their elements are part of the DOM like the rest of the page, and the DOM elements that represent form fields support a number of properties and events that are not present on other elements. These make it possible to inspect and control such input fields with JavaScript programs and do things such as adding new functionality to a form or using forms and fields as building blocks in a JavaScript application. -But their elements are part of the DOM like the rest of the page, and the DOM elements that represent form fields support a number of properties and events that are not present on other elements. These make it possible to inspect and control such input fields with JavaScript programs and do things such as adding functionality to a traditional form or using forms and fields as building blocks in a JavaScript application. - -## Fields - -A web form consists of any number of input fields grouped in a `<form>` tag. HTML allows a number of different styles of fields, ranging from simple on/off checkboxes to drop-down menus and fields for text input. This book won't try to comprehensively discuss all field types, but we will start with a rough overview. +A web form consists of any number of input fields grouped in a `<form>` tag. HTML allows several different styles of fields, ranging from simple on/off checkboxes to drop-down menus and fields for text input. This book won't try to comprehensively discuss all field types, but we'll start with a rough overview. A lot of field types use the `<input>` tag. This tag's `type` attribute is used to select the field's style. These are some commonly used `<input>` types: @@ -23,7 +14,7 @@ A lot of field types use the `<input>` tag. This tag's `type` attribute is | `radio` | (Part of) a multiple-choice field | | `file` | Allows the user to choose a file from their computer | -Form fields do not necessarily have to appear in a `<form>` tag. You can put them anywhere in a page. Such fields cannot be submitted (only a form as a whole can), but when responding to input with JavaScript, we often do not want to submit our fields normally anyway. +Form fields do not necessarily have to appear in a `<form>` tag. You can put them anywhere in a page. Such form-less fields cannot be submitted (only a form as a whole can), but when responding to input with JavaScript, we often don't want to submit our fields normally anyway. ```
(text)
@@ -35,9 +26,9 @@ Form fields do not necessarily have to appear in a `<form>` tag. You can p(file)
``` -The JavaScript interface for such elements differs with the type of the element. We'll go over each of them later in the chapter. +The JavaScript interface for such elements differs with the type of the element. -Multiline text fields have their own tag, `<textarea>`, mostly because using an attribute to specify a multiline starting value would be awkward. The `<textarea>` requires a matching `</textarea>` closing tag and uses the text between those two, instead of using its `value` attribute, as starting text. +Multiline text fields have their own tag, `<textarea>`, mostly because using an attribute to specify a multiline starting value would be awkward. The `<textarea>` tag requires a matching `</<wbr>textarea>` closing tag and uses the text between those two, instead of the `value` attribute, as starting text. ```