Home>

I am creating an inquiry form.
Thanks for your wonderful advice here
Somehow just with HTML/CSS
By selecting "Inquiry item"
There is a part I want to show and a part I want to hide,

However, the next problem was, for example
1. I want to arrange "inquiry items" side by side
2. Decorate the "trigger to know the site" part with CSS
Arrange the answer parts side by side (fold back) in the same way
I want to style it easily.

However, the display/non-display already matches the radio button.
Because it is coded to be applied
Cannot be changed with the parent element "data-contents"
The decoration and centering (flexbox) in "sir you"
can not use.

I tried changing the tags
When decoration and flexbox become available
It is no longer possible to show/hide according to the radio button
And vice versa.

Because the parent element is surrounded by the whole
I want to style the part of the child element
If i need a parent element (in this case I want to style only the ".siryou" part)
What do you do.

I would appreciate any advice.
I was worried for a day, but ...
I think it's best to show/hide in Java.
I'm totally ignorant, so I couldn't understand it right away ...
I styled this time as much as possible
I would like to create an inquiry form with this type
I consulted.

Thank you.

                <!-Family->                                        <input type = "radio" name = "qtype" value = "Inquiry">                    <label for = "i_qtype01">Inquiries</label>                    <input type = "radio" name = "qtype" value = "Request for information">                    <label for = "i_qtype02">Request for materials</label>                    <input type = "radio" name = "qtype" value = "campaign">                    <label for = "i_qtype03">Campaign</label>            <!-Parent-><Dib>                <!-Display when contact is selected->
                  <!-Children->                <Dib>                    <Dib>                        <label>How did you get to know the site</label>                                                                        <em>Optional (multiple answers allowed)</em>                                                                        <input type = "checkbox">                        <label for = "check01_01">Introduction</label>                                                                        <input type = "checkbox">                        <label for = "check01_02">Advertising</label>                                            <input type = "checkbox">                        <label for = "check01_03">SNS</label>                                                                        <input type = "checkbox">                        <label for = "check01_04">DM</label>                                                                        <input type = "checkbox">                        <label for = "check01_05">FAX</label>                      
                                                  <label>Inquiry content</label>                        <em>Required</em>                        <textarea required></textarea>                                            <!-<Displayed when requesting materials->                                                                    <label>Inquiry content (optional)</label>                        <textarea></textarea>                                        <!-<Parent tag close-><!-<Family close->
  • Answer # 1

    There are still double-byte spaces left. Let's delete it.
    Half-width spaces and full-width spaces are indistinguishable from each other in appearance, so let's set them so that they can be distinguished in the editor settings.

    So, the main subject,

    1. I want to arrange "inquiry items" side by side

    I don't know what the "inquiry item" is, but the first three radio buttons are side by side.

    〇Inquiries
    〇 Request for materials
    〇Campaign
    If you want to display something like this, you can start a new line with
    .

    <p>Inquiry items</p>
    <input id = "i_qtype01" type = "radio" name = "qtype" value = "Inquiry">
    <label for = "i_qtype01">Inquiries</label><br>
    <input id = "i_qtype02" type = "radio" name = "qtype" value = "Document request">
    <label for = "i_qtype02">Request for materials</label><br>
    <input id = "i_qtype03" type = "radio" name = "qtype" value = "campaign">
    <label for = "i_qtype03">Campaign</label>
     

    2. Decorate the "trigger to know the site" part with CSS
    Arrange the answer parts side by side (fold back) in the same way
    I want to style it easily.

    If you set flex to .siryou .siryou-02 in the current HTML, you can arrange its child elements side by side.
    I think that you can freely set the style if you set the class appropriately for the elements inside.

    As for the layout, flex can be arranged vertically by setting, so it is possible to arrange horizontally and vertically like a table by nesting blocks and arranging them horizontally and vertically.

    Basic usage of Flexbox/Web Design Leaves

    Alternatively, Grid can be used to simply realize complex tables without nesting blocks.

    Understand the grid CSS quickly and use it for client work | Shinjuku homepage production company ITTI

    Postscript

    What kind of layout is not presented, a sample with a layout that I guessed somehow by referring to the previous question

    CodePen sample

    For the time being, only the overall layout. Set the background color, text color, font size, etc. to your liking. Since a class is assigned, you can set it for that class.