Fulfledge

Put a page together

INPUT · Slides

Lay out the parts of a form

01 / 05

A form is a collection of input parts

Getting in touch, signing up, answering a survey — every page where you write something and send it is made of a form.

All the parts go inside a box called <form>. Nothing gets sent here, so try things freely.

<form>  <p>Your name</p></form>

02 / 05

A one-line box is an input

A one-line box for a name or an email address is made with <input>.

  • type="text" … ordinary text
  • name="..." … the name you give that box

Just like img, input has no closing tag.

<input type="text" name="namae">

03 / 05

Say what the box is for with a label

A box on its own tells nobody what to write in it. Add the words of the heading with <label>.

The usual order is to put it in front of the box.

<label>Your name</label><input type="text" name="namae">

04 / 05

Long writing, and choices

  • <textarea> … a box you can write many lines in. It has a closing tag
  • <select> and <option> … a box for picking one of the choices you set out

select is the container and option is a choice. Same shape as ul and li.

<textarea name="honbun"></textarea><select name="youken">  <option>An order</option>  <option>A question</option></select>

05 / 05

Last comes the send button

Make the send button with <button>. Whatever you wrap comes out on the face of the button.

That is the full set of parts. Inside the form, lay out label and input from the top down — that is how a form is made. Have a go.

<button>Send this</button>