form

Prompt file imported from jacwu/github-materials (.github/prompts/form.prompt.md). Copyright stays with the author.

Goal

Your goal is to generate a new html page with form.

Ask for the form name and fields if not provided.

Requirements

place all the html, css and js code into a single html file.

Use appropriate form elements: Select suitable form elements like , , , etc., according to the form's purpose. For the element, use the type attribute to specify its type, such as text, password, email, etc., which enables browsers to provide better input validation and user experience.

Use the tag: Add a tag for each form element and associate it with the corresponding form element using the for attribute. This improves form accessibility, and users can focus on the corresponding form element when clicking the label.

Naming of Form Elements: Use meaningful names: Give the name attribute of form elements meaningful names, which facilitates the processing of form data by server-side scripts. The names should be concise and clearly describe the purpose of the form elements. html

Form Validation: Use HTML5 validation attributes: Leverage HTML5 validation attributes such as required, minlength, maxlength, pattern, etc., to perform basic validation on form elements.

Layout and Typography: Use the box model: Reasonably use box model properties (margin, padding, border) to control the spacing and borders of form elements, ensuring a neat and aesthetically pleasing form layout.

Responsive design: Consider different device screen sizes and use techniques like media queries to achieve a responsive form layout, ensuring the form is properly displayed and usable on various devices.

Style and Interaction: Consistent style: Maintain a unified style for form elements, including fonts, colors, button styles, etc., to make the form look coordinated.