Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Form Fields | Advanced Concepts
Introduction to HTML

book
Form Fields

Text fields allow users to enter a single line of text.

html

index.html

copy
<!DOCTYPE html>
<html>
<head> </head>
<body>
<form>
<label for="name">Name:</label><br />
<input type="text" id="name" name="name" /><br />
</form>
</body>
</html>
  • The label element is used to provide a label for the text field;
  • The input element is used to create the text field;
  • The type attribute specifies that this is a text field. You can set type="date", type="number" etc.;
  • The id and name attributes uniquely identify the field.

Radio buttons allow users to select a single option from a list of options.

html

index.html

copy
<!DOCTYPE html>
<html>
<head> </head>
<body>
<form>
<label for="color">Choose a color:</label><br />
<input type="radio" id="red" name="color" value="red" />
<label for="red">Red</label><br />
<input type="radio" id="green" name="color" value="green" />
<label for="green">Green</label><br />
<input type="radio" id="blue" name="color" value="blue" />
<label for="blue">Blue</label>
</form>
</body>
</html>

The value attribute specifies the value submitted with the form when a particular radio button is selected.

textarea elements allow users to enter multiple lines of text.

html

index.html

copy
<!DOCTYPE html>
<html>
<head> </head>
<body>
<form>
<label for="message">Message:</label><br />
<textarea id="message" name="message" rows="5" cols="50"></textarea>
</form>
</body>
</html>

This textarea element would be displayed on the web page as a blank field where the user can type in a message. The rows and cols attributes are used to specify the size of the textarea in terms of the number of rows and columns.

Task

  1. Add a "name" field, which should be a simple text field (type="text").
  2. Add a <label> field for the "email" text field below.
  3. Fill in the radio button below, similar to the one done above for the male option.
  4. Create a radio button for the option "other" below, similar to the one done above for the female option. Also, add a <label>.
  5. Add a submit button here.

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 5. Kapitel 4
We use cookies to make your experience better!
some-alt