HTML Forms Cheatsheet

1 Forms Overview 3 Input Elements 4 Pattern Validation

Purpose: UI for backend data interaction (insert, up- 3.1 Textbox Use pattern attribute with Regular Expressions:
date, delete, query)
1 < input type = " text " pattern = " regex " name = " field "
Basic Syntax: 1 < input type = " text " name = " username " >
>
1 < form >
2 ... form elements ... 3.2 Text Input Attributes
3 </ form >
Attribute Description 4.1 Regex Meta Characters
name Required for form submission
value Default value Char Meaning Example
2 Form Attributes placeholder Watermark text ? Zero or once colou?r → color,
readonly View/submit only colour
disabled View only, no submit * Zero or more colou*r → color,
2.1 Identification
required Must have value colour, colouur
Attribute Purpose autofocus Auto-focus on load + One or more colou+r → colour,
id Unique identification colouur
name Reference name 3.3 Length & Size
class CSS class name
Attribute Purpose 5 Key Points
size Display width (default: 20)
2.2 Method maxlength Maximum characters • Every form element must have a name attribute
minlength Minimum characters
1 < form method = " get | post " > 1 < input type = " text " name = " otp " • Use POST for data submission, GET for data re-
2 size = " 4 " minlength = " 4 "
trieval
3 maxlength = " 4 " required >

2.3 Other Attributes • required ensures field has value

3.4 Data List (Autocomplete)
Attribute Purpose • minlength validates length, not existence
1 < input type = " text " name = " course " list = " courses "
action Target location for submission
>
novalidate Disable HTML validations 2 < datalist id = " courses " > • novalidate disables HTML validation for custom
3 < option > Java </ option > validation
1 < form method = " post " action = " page . html " 4 < option > React </ option >
novalidate > 5 < option > Python </ option >
6 </ datalist > • readonly allows submit, disabled doesn’t