← Back to index

5. Interactive web

Forms

We create them with the <form> tag and have as attributes: action, method, accept, enctype, id. Here's an example.

Text boxes

Note: You should probably add an id to each field.

Enabled text box:

Disabled text box:

A tiny text box:

Sneaky text box:

Buttons

Regular button (need Javascript to make it do stuff):

File button:

Image button:

Reset button:

Submit button:

Options

Favorite color?

Blue
Orange
Pink
Yellow
Green

Accept terms and conditions?

Wait I haven't even read those how do I know if I agree or not (Yes)
No

Here! Check as many as you like as a reward!

Whohooo!
I
love
checkboxes <3

(List of) Lists of options

List of things you can to list options:

Text area

Hidden fields

(Check the code to see it)

Other things that aren't covered in the book

Note: Failure to select the correct option will result in ☠️ instant death ☠️

Select the number 37:    0 100

Select the number of siblings you have:

Select the color of a mirror:

Select your birthdate:

Write a phone number from French Guiana (assume you are calling from France and that it is a fixed phone line): Hint

Select the most appropiate time to slay thy enemies:

More input types!

Organizing forms

The form above is a terrible example of how a form should be organized. Here's a better example!

To organize a forms we use:

This page is getting quite long... Why don't we add a table of contents to make navigation easier? To do that, we have to:

  1. Add an id to the sections we want to link to (e.g. <h2 id="forms">)
  2. Add an anchor element with the # symbol followed by the section id (e.g. <a href="#forms">)

Like this:

Title

Another application of this is a ⬆️ Back to top button ⬆️.

Multimedia

Images

Remote image:

Square tiles at the Alhambra

Local image:

Dithered picture of Barcelona's Tram behind a tree.

Audio and video

We use the <object> tag to add audios and videos.With the <param> tag we control autoplay, looping, and so on.

If we want to use media from other web pages we should cite the webpage and also use the embed code they give you.

witnesstestimony by GamingWithJumbo | License: Creative Commons 0

(I embedded the audio because I am too lazy to download more files and also neocities doesn't let you upload audios and videos)