How to optimize HTML forms for Illustrator?« Back to Questions List

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]

Asked by msbhogavi
Added April 26, 2016 2:19 am

This question has been resolved, view the correct answer now!

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:

Native Render Bug and Browser Font Rendering

FIX: add a CSS lib such as bootstrap or your own custom CSS for each input type
Answer by admin
Answered On April 26, 2016 1:29 pm #
Looking for another answer? View other questions in HTML or get premium support for guaranteed results.
Asked by msbhogavi
1671 views
1 answer
Last Answered 8 years ago by admin

Categories

Recent Answers

asked by nmax
asked by shanrt
asked by Ali Sodikin
[+] View All Recent Questions

Share Your Knowledge!

Contribute to the community and help other users to benefit from your answer with experience and knowledge.