issues with buttons, Buttons are not included inside the form
this is my code , i grouped two btn inside a div and when i look at inspect they are not inside the div. i wanted to do something like add remove button on the form. i have attached ss for further reference
<button class="member-icon flex">
<svg>
<use href="icons.svg#OouiUserGroupLtr"></use>
</svg>
<form action="" >
<div class="avatar flex">
<img src="./Avatars/1.png" alt="avatar" class="main-avatar" />
<div class="avatars-group">
<img src="./Avatars/1.png" alt="avatar" />
<img src="./Avatars/2.png" alt="avatar" />
<img src="./Avatars/3.png" alt="avatar" />
<img src="./Avatars/4.png" alt="avatar" />
<img src="./Avatars/5.png" alt="avatar" />
<img src="./Avatars/5.png" alt="avatar" />
<img src="./Avatars/7.png" alt="avatar" />
<img src="./Avatars/8.png" alt="avatar" />
</div>
</div>
<label for="fname"
>First name <input type="text" name="fname"
/></label>
<label for="lname"
>Last name <input type="text" name="lname"
/></label>
<label for="email"
>Email <input type="email" name="fname"
/></label>
<div class="add-remove-btn">
<button class="add-btn">Adds</button>
<button class="remove-btn">remove</button>
</div>
</form>
</button>
<button class="member-icon flex">
<svg>
<use href="icons.svg#OouiUserGroupLtr"></use>
</svg>
<form action="" >
<div class="avatar flex">
<img src="./Avatars/1.png" alt="avatar" class="main-avatar" />
<div class="avatars-group">
<img src="./Avatars/1.png" alt="avatar" />
<img src="./Avatars/2.png" alt="avatar" />
<img src="./Avatars/3.png" alt="avatar" />
<img src="./Avatars/4.png" alt="avatar" />
<img src="./Avatars/5.png" alt="avatar" />
<img src="./Avatars/5.png" alt="avatar" />
<img src="./Avatars/7.png" alt="avatar" />
<img src="./Avatars/8.png" alt="avatar" />
</div>
</div>
<label for="fname"
>First name <input type="text" name="fname"
/></label>
<label for="lname"
>Last name <input type="text" name="lname"
/></label>
<label for="email"
>Email <input type="email" name="fname"
/></label>
<div class="add-remove-btn">
<button class="add-btn">Adds</button>
<button class="remove-btn">remove</button>
</div>
</form>
</button>
1 Reply
found the issue, button inside a button doesnt work