Search code examples
phphtmllighthouse

Duplicate hidden form with not unique input ID


I have a layout that require to have the same form in 2 different place for mobile and desktop view

What I did is to wrap both in a container that hide one or another based on viewport size

I was testing with Google Lighthouse and it complains that form field ID are not unique Any way to fix this without handle the 2 form field with different ID?

I always add input field with the same ID and NAME

<input type="text" class="form-control" id="name" name="name" value="" required>

I guess I will not have any issue with post variables if I differentiate ID while keeping field name the same

<input type="text" class="form-control" id="name-mobile" name="name" value="" required>

Solution

  • IDs must be unique within an HTML document, so no, there is no way to do this without changing the IDs.

    I guess I will not have any issue with post variables if I differentiate ID while keeping field name the same

    IDs have no relevance whatsoever in creating the form submission data set. Question would be, whether IDs are actually needed for anything in particular here to begin with.