Forms

Forms#

Forms allow the user to interact with the html page. There are a few special html tags to work with forms, these are covered on this page.

Input#

Input line.

type atribute#

Describe a purpose of the input. Can take the following values:

  • text;

  • password;

  • email;

  • tel;

  • number;

  • range;

  • submit.

The values are discussed in more detail in other sub-sections.

type="text"#

Just basic input.

type="password"#

Used to enter passwords. Symbols change to dots as you type.

%%HTML
<input type="password">

type="email"#

Used to enter an email address. The value is validated to ensure it is a real email address when sumbit button will be pressed.

%%HTML
<form>
    <input type="email">
    <input type="submit">
</form>

type="tel"#

Used to enter an phone numter. The value is validated ito ensure that it is a telephone number that satisfies the given pattern atribute. The following example dispays using of <input type="tel">. You can check the result here.

display(HTML("<hr>"))
with open("forms_files/input_type_tel.html") as file:
    print(file.read())
display(HTML("<hr>"))

<!DOCTYPE html>
<html>
<body>

<h2>Input for phone</h2>

<form>
    <label for="phone">Phone number:</label><br>
    <input type="tel" id="phone" 
           pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
           
    <small>Fomat: 123-45-678</small>
    <br><br>
    <input type="submit">
</form>

</body>
</html>

type="number"#

Used to enter the number.

Attributes:

  • min minimum value;

  • max maximum value.

In the following example you can play such an element.

%%HTML
<form>
    <input type="number" min=3 max=10>
</form>

type="range"#

Creates a slider.

Attributes:

  • min - describe a minimal value;

  • max - describe a maximum value;

  • step - describe a step of the slider.

%%HTML
    <label for="range1">Range1</label><input id="range1" type="range" min=0 max=100 step=0.5><br>
    <label for="range2">Range2</label><input id="range2" type="range" min=0 max=5 step = 2>

Label#

It is the text the purpose of which is to sign, some element on the form. The main difference with just the <text> tag is that by clicking on the <label> you will focus on the element whose id was mentioned in the for attribute of the <label>.

You can try this in the following example, by clicking on label for input1 the input line will be activated. But if you click on just random text nothing happen.

%%HTML
<label for="input1">label for input1</label>
<br>
<text>just random text</text>
<br>
<input id="input1">

just random text