How do you indicate the input status of HTML5 form fields?

While the "required" attribute is a great way to make sure the field is properly filled. Developers in the backend side of things should adhere to validation practices to ensure that forms are filled out accurately and completely. it's also a good idea to use the "aria-invalid" attribute to indicate that the value entered into an input field is not in a format or a value the application will accept.

I agree with Nathan Thomas, adding border will interfere with width. Red asterisk is better option for me. Sometimes default required attribute isn't enough when you are validating datetime picker field and you'll need to intervene the form submission using javascript and use preventDefault() if the validation fails.

Actually, from a ux perspective, it usually is better to add a simple text like 'optional' to inputs that are NOT required (seeing as most inputs will be required usually). You could use pseudo elements for this, but also solve this with your framework.

The usage of border is fine, as long as the developer also adds a default, transparent border for the default state of the input, with the same width as used to highlight the error state. The border can also be used for the active/focus state of the field. Outline is fine too, plus it's better for accessibility to make it obvious where the cursor is.

In HTML5, you can use the "required" attribute to indicate that a form field must be filled out before submitting the form. Additionally, you can use the "pattern" attribute to specify a regular expression pattern that the input value must match. This can help provide visual feedback to users about the input status of form fields. Additionally, using CSS, you can style the form fields to change appearance based on their validation status, such as using pseudo-classes like :valid and :invalid.

Using styles alone is not always sufficient - good UX should be clear as to why the validation failed. It's best to accompany state indicators with actual description of errors and what users can do to rectify them. Consider a password input that has requirements for length, character range etc, indicating invalid state won't help the user to figure out what's wrong with "1234"

While the above might be an option with plain html and css, when using Angular - it is advisable and easier to validate forms in the life cycle hook using Validators, and required in the component Typescript file, alongside its form control name. Firstly, the project won't compile properly when the form control name is wrong. Secondly, you can use the Angular material error to indicate what the user is expected to enter in the field. These are different from adding patter and type of input. So yes, CSS isn't enough for input validation.

It depends on the whole UI design. It is known that a good interface will have consistent styles for all fields. Pseudo-classes are one of the ways to inform the user about what is happening in the application.

Also adding tooltip information on the fields is a good idea to let the user know that input is disabled/readonly. (We cant predict the behaviour of users since they can assume anything about the disabled input)

Color/Colour code the field with the CSS will be a good visual clue that the field is disabled, it is a good practice to keep the user experience consistent and make simple for the user to recognize it.

Two things should be considered here: 1. Functionality 2. Styling While the latter can be done very easily in many ways, the first one is debatable. Where and when to use disabled, and why not use "readonly" attribute. There's no one size fits all, but since both attributes are bad for a11y and usability, one could use the disabled attribute when the field value shouldn't be submitted, and readonly when the field value should be submitted. Also readonly looks like a better candidate when presenting a form that already has values e.g Having an account details form, where you can update your profile details, but you want to keep the username unique, hence you can't modify the user name, but you can update other details like email, etc.

You have to remember that you can easily disable this parameter from the level of developer tools. A good software engineer will make sure that even in such a situation when someone forces you to press the button, the backend is properly blocked.

Adding a status bars serves well in keeping the user engaged and updated on what is going on, however you should consider finding the thin line not to overdo it and consider the kind of users who will be interacting with the application, the kind of internet they will be using to access it, as more javascript may lead to poor user experience. i.e if you are having more than one status bar for a single form it may not have a good user experience, they may be distracted as they wait for the status bar to fully load, instead show one status bar when the user is submitting the form which will serve the purpose well.The user know he /her is done with the current activities expecting next.

Informing the client about what is happening at every step of the application is the basis of good programming practices. You have to remember about the mobile version, such pseudo-classes usually require additional work to display them properly.

In my experience, I worked with WordPress, its themes, plugins, and Custom CSS since years. At this point, I think I should get myself going with JavaScript learning and ongoing work at the same time. Any of your thought about this would be really appreciable.

Javascript offers a better functionality in my opinion. So I'll say while styling with CSS, it's also very important to utilize Javascript's functionality when adding a custom indicator. I have used one in React Js with loading spinner in the past.

Adding tooltips to fields that can be confusing or are not too common. A brief description is enough in most cases so the user knows what is expected in those fields. This is critical in e-commerce sites, where one of the abandonment reason is non-intuitive forms, putting at risk potential new user and profits.

We can use javascript and define it using border:1 px solid green or red or according to your needs. You can also place a checkbox here.

In HTML5, you can use the :valid, :invalid, :required, and :optional pseudo-classes along with the :focus and :placeholder-shown pseudo-classes to indicate the input status of form fields. These pseudo-classes help you style form elements based on whether they are valid, invalid, focused, or have placeholder text shown. Here's a brief explanation of each pseudo-class: :valid and :invalid: These pseudo-classes are used to style form elements based on their validity. For example, you can apply different styles to an input field when its value is valid or invalid. Example: css input:valid { border-color: green; } input:invalid { border-color: red; } :required and :optional: