Find the attached simple login design with single form consisting of 2 input fields and a button. I have tried to optimize the same but unable to get proper html.
[AI file link hidden]
|✓ Correct Answer|
Use Correct Layers with Layer Tags
You need to use Layer Tags with valid elements, in your situation you are using From Tag (folder support only), with a Layer-Item. Some Layer Tags only work with specific layers: //exportkit.com/learn/how-to/advanced-guide/building-web-forms.
Form Tag = Folders
Input Tag = Text Layer Items
Your AI form uses page items
The only layer is “Content” = this will export “form container” as a single image.
The fix is to use Layer Folders
This will export the form correctly. Ensure your input elements are Text Items only, not Group Items.
Forms and Browsers
It is impossible to have web-forms look the same on each browser without additional CSS, test these PSD examples on various browsers:
FIX: add a CSS lib such as bootstrap or your own custom CSS for each input type
Share Your Knowledge!
Contribute to the community and help other users to benefit from your answer with experience and knowledge.