Lessons 21 · 1 lessons · N. I. Taylaqov (general editor), A. B. Akhmedov, M. D. Pardayeva, A. A. Abdug‘aniyev, U. M. Mirsanov. Informatics and Information Technologies, Grade 11, 1st edition. “Extremum-press”, Tashkent, 2018
21
Creating and decorating forms on web pages
Textbook: pp. 77–80
GoalCreates an HTML form (form, input, label, button), uses attributes that check the entered data and builds a result from the entered texts with JavaScript; knows the rules for collecting personal data.
New words
<form>: the container of a form; its action says where the data goes and method how · <form><input>: an input field; its type may be text, number, email, password, checkbox, radio and more · <input>validation: checking that entered data is complete and correct · validatsiya<label>: the caption of a field, linked to it with for and id; it helps screen readers and clicking · <label>
Explanation
A form is used to get data from the user: registration, a questionnaire, search, a calculator. In HTML a form is wrapped in the <form> tag; inside there are <input> fields, <textarea> (multi-line text), <select> (a list) and <button>. The type of an input is given by the type attribute: text, number, email, password (characters are hidden), checkbox and radio (choices), date. The name attribute of each field is the key under which the data is sent to the server; <label for="ism"> ties a caption to the field with id="ism". The form is sent to the action address with method="post" or "get"; GET shows the data in the URL, so POST and HTTPS are used for passwords or personal data. Before sending, the browser checks data with attributes such as required, min/max, maxlength and type="email"; this validation is for convenience, but a user can get around it, so the server must also check the data again. JavaScript can also work with the typed text: the value property gives the field's value and textContent shows the result. When creating a form, ask only for the data that is needed; work with personal data is regulated by the Law on Personal Data (2019), and in learning exercises enter invented data rather than real people's data.
Worked examples
A club sign-up form with checks: <!DOCTYPE html> ⏎ <html lang="uz"> ⏎ <head> ⏎ <meta charset="utf-8"> ⏎ <title>Klubga yozilish</title> ⏎ </head> ⏎ <body> ⏎ <form action="/join" method="post"> ⏎ <p><label for="ism">Ism:</label> ⏎ <input type="text" id="ism" name="ism" required maxlength="30"></p> ⏎ <p><label for="yil">Tug‘ilgan yil:</label> ⏎ <input type="number" id="yil" name="yil" min="2005" max="2012" required></p> ⏎ <p><label for="pochta">E-pochta (ixtiyoriy):</label> ⏎ <input type="email" id="pochta" name="pochta"></p> ⏎ <button type="submit">Yuborish</button> ⏎ </form> ⏎ </body> ⏎ </html> If the name is empty or the year is outside 2005–2012, the browser does not let it be sent; the number of valid values for the year is 2012 – 2005 + 1 = 8.
A JavaScript form that builds a short entry from a surname and first name: <!DOCTYPE html> ⏎ <html lang="uz"> ⏎ <head> ⏎ <meta charset="utf-8"> ⏎ <title>Qisqa yozuv</title> ⏎ </head> ⏎ <body> ⏎ <p>Familiya: <input type="text" id="fam"></p> ⏎ <p>Ism: <input type="text" id="ism"></p> ⏎ <button onclick="qisqa()">Hosil qil</button> ⏎ <p id="chiqish"></p> ⏎ <script> ⏎ function qisqa() { ⏎ var f = document.getElementById("fam").value.trim(); ⏎ var i = document.getElementById("ism").value.trim(); ⏎ var out = document.getElementById("chiqish"); ⏎ if (f === "" || i === "") { ⏎ out.textContent = "Ikkala maydonni to‘ldiring"; ⏎ } else { ⏎ out.textContent = f + " " + i.charAt(0).toUpperCase() + "."; ⏎ } ⏎ } ⏎ </script> ⏎ </body> ⏎ </html> If “Karimov” and “aziza” are entered, the result is “Karimov A.”; if the first name is empty, the message “Ikkala maydonni to‘ldiring” (“Fill in both fields”) appears.
Class activity
“Testing the form”: a pair opens the form, deliberately enters wrong values (an empty name, the year 1999, the e-mail “abc”) and writes down which message the browser gives; then they compare the messages with classmates.