HTML Has Useful Tools For The Technical Novice:Learn About Range Fields And URL Fields

HTML5 provides software developers with many useful field types for creating user interfaces with the input tag. Here is a handy little guide to their use: Search Fields
By using type="search", you can style a standard text field as a search field. The main benefit of using search over text is that it lets web browsers style the field according to standard operating system conventions. Telephone Number Fields
By using type="tel", you can restrict input to phone numbers. It will also autofill numbers. Though, if you actually want to validate the input, you need to use either the setCustomValidity() Javascript method or the pattern attribute. URL Fields
By using type="url", you can restrict input to web URLs. Unforutnately, this has limited use, as it requires a full and absolute URL. Relative URLs and domains will not work. Email Fields
By using type="email", you can restrict input to email addresses. Like with phone numbers, it will autofill data. But, unlike with phone numbers, it will actually perform validation to make certain a proper address is entered. Number Fields
By using type="number", you can restrict input to numbers. You can also specify a minimum and maximum value and a step value, which can be useful on some desktop browsers, as they will create a nudge widget next to the field respecting this value. Range Fields
By using type="range", you can create a slider representing values between a min and max, along with a step value between them. The browser, though, will not necessarily display the value selected. Color Fields
By using type="color", you can restrict input to hexadecimal RGB values. Unfortunately, while some browsers will also include a color picker, others will simply require users to enter a number. Date Fields
By using type="date", you can restrict input to dates. This field type suffers from the same problem as color fields, in that a data picker is provided in some browsers but not others. For more information click here https://www.smashingmagazine.com/2019/01/html5-input-types/.