24.2 Code Repo Question

Question

Really struggling with the question on this one, anyone got any ideas? Maybe i still dont quite understand the principles from this module but Im hoping the answer will help it make sense. This is the part of the question im struggling with together with the code its referring to. Its to do with applying Flex to a form and for the elements to appear in columns instead of ontop of each other.

Question (part of):

1. Modify the HTML of the form: remove the <br> elements that separate the form into lines.
- Add <br> elements after the <label> tags, so that the number field appears after the label, on a new line.
- Wrap each section element into <div> tags, and provide them a class="form-section".
- Now we will have 3 "form-section" elements. Two of them will contain the labels and their corresponding fields, while the 2rd one will contain the button.

The code as it stands:

<section id="buy">
<form>
<label for="Adults"><b>Adults</b></label>
<input type="number" id="Adults"> <br><br>
<label for="Children"><b>Children</b></label>
<input type="number" id="Children"> <br><br>
<input type="button" value="Buy">

</form>
</section>

Thanks so much!

Answer 1

When labels and form fields are correctly connected

Answer 2

Thomas Murphy

1 - remove br tag after the input and add br after the label

2 - add each label tag with input tag inside a div tag and provide a class to that div tag:

Example:

<div class = 'form-section'>
<label></label><br>
<input></input>
</div>

Now change other inputs like that.

Answer 3

Thomas Murphy in code AJ posted he missed one quote, maybe this quote make problem.

<div class = "form-section">
not <div class = "form-section>

Answer 4

The code I pasted in my question is my code. The parts of the question I pasted are all referring to that piece of code. I dont understand how to do what its asking. Cheers

Answer 5

Thanks for this. Can you explain what's going on in the code (your answer), or would you need to see the whole project/code/question? Your solution has put everything in the right place/orientation but a few other unexpected things have changed which I will need to figure out, I think these changes are an issue with the rest of my code....standard. Thanks again.

Answer 6

when labels and forms are correctly connected

Answer 7

When labels and forms are correctly connected