How is the following image coded? How long will it take?
I would like you to tell me!

Because there are no friends of markup engineers around, I'm curious how i am coding.
Because in the case of my image below,
Adjust between the name and required with the margin, do not know how to display the male and female of the gender, paste it in the image, you will not understand why, too much margin in the upper and lower border settings in the name column in the first place Responsive but messed up ...

Time also takes all day. . . . .

I want to learn from your code!

  • Answer # 1

    PC has two columns

    Title input field
    Title input field

    A smartphone has one line as shown below

    Input field

    Input field

    should be used.

    If you search well, you will find various sample codes.

    For example, searching for "CSS form responsive"

    [Horizontal] How to make an inquiry form [Responsive] | Kei Blog

    How to make a contact form that is not compatible with smartphones "responsive" for the time being | Naoki Nishizawa IT Course

    It seems to be helpful.

  • Answer # 2

    Simply div and enclose the form name for "name", "gender" ... and the input system, and add css to the class on the div side Draw a border.
    And move the position with a float or something like that ...

    Or as a foul technique (usually impossible usage), express a frame with a table and specify the width in the class on the th side, etc.