A registration page needs to collect input, not only display information. A form groups controls that gather values for submission. HTML describes those controls and the submission method; saving a registration requires a receiving service.
Read a minimal form
<form action="/search" method="get">
<label for="keyword">Which book?</label>
<input id="keyword" name="q" type="text">
<button type="submit">Search</button>
</form>form groups the controls. label explains an input, and its for matches that input's id. input is a void element; type="text" creates a plain-text field. A button with type="submit" requests form submission. The next lessons examine these elements individually.
Where values go
action is the receiving address and method is the submission method. /search represents a handler at the website root; this course does not provide a book-search service there. With get, typing Leaf could produce a query containing ?q=Leaf. q comes from name; Leaf comes from the entered value.
name names a submitted field. id identifies an element in the document. An id alone does not supply the submission name. Change name to keyword and the submitted field name changes too.
post normally places form data in the request body and suits operations such as creating a registration. POST is not encryption or a security guarantee. Real services need HTTPS and server-side checks. GET commonly retrieves information, such as search results, and should not carry passwords.
What the preview does
The course preview accepts real input but does not send form data or pretend a registration succeeded. Compare the search and registration examples, inspect action, method and name, then type values. If you copy the form locally without implementing its receiving address, submission may return a missing page; this is not an input markup error.
For now, understand the route: controls collect values, names identify fields, and the form specifies where and how to send them.
Page experiment: Introduction to forms
Compare the examples, then change one part of the HTML using the observation prompt. Compare the source with the real rendered page.
The input id is keyword, but the submitted field name is q. Their roles differ. The preview sends no data.
The preview uses native browser headings, paragraphs and form controls. Switching examples replaces your edits; Reset lab restores the initial state. Follow in-page links, type and select options. This practice preview does not send form data or run scripts. To try locally, save the complete code as index.html and open it in a browser.
KNOWLEDGE QUIZ
Build it yourself: Introduction to forms
Create index.html, write a complete page using the requirements below, then save and open it in a browser. Interact with the page to check it. The reference is one possible implementation; wording may differ.
- Write a GET search form with action /search and a text input named topic.
- Label the field and add a submit button; explain why no receiving service means no search results.