Sorry if this is a stupid question but I have used bootstrap for a school project and got this as a mistake so I would like to understand what is the error.
It's about the use of forms.
In the w3c html documentation there is a use of name attribute:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
While in the bootstrap documentation, there isn't
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>
Do I have to add those attribute myself or should it be use as is with bootstrap ?
Related
<div class="input-group mb-3">
<label class="input-group-text form-floating ">Tell us Your Name *</label>
<input type="text" class="form-control" placeholder="First Name">
<input type="text" class="form-control" placeholder="Last Name">
</div>
My code is like this, but what I want to do is to have the label part above the input part and be responsive. I will be glad if you help me
Try this code. It adds the row and col syntax in your html.
<div class="input-group mb-3 row">
<label class="input-group-text form-floating col-12">Tell us Your Name *</label>
<input type="text" class="form-control col-6" placeholder="First Name">
<input type="text" class="form-control col-6" placeholder="Last Name">
This will put the label at the top and the input fields below the label.
This may seem like I'm missing something super simple, but I cannot for the sake of me figure this out.
I have a <form> wrapped inside a <div class="form">, and for some reason, in the browser, the form, and the div, have a height of 0, and all the content is overflow. When I inspect the document from the browser, the browser does not recognize this div or form.
Here's the problem area here:
Also, you can inspect it at this website here: Web page
<div class="form">
<form>
<div class="contact">
<label for="first">First Name:</label>
<input id="first" type="text" placeholder="First Name"><br>
<label for="last">Last Name:</label>
<input id="last" type="text" placeholder="Last Name"><br>
<label for="tel">Phone Number:</label>
<input id="tel" type="tel" placeholder="(###) ###-####"><br>
<label for="email">Email:</label>
<input id="email" type="email">
</div>
<div class="address">
<label for="address-1">Address</label>
<input id="address-1" type="text" placeholder="Address Line 1"><br>
<label for="address-2">Address, Line 2</label>
<input id="address-2" type="text" placeholder="Address Line 2"><br>
<label for="city">City:</label>
<input id="city" type="text" placeholder="City"><br>
<label for="state">State:</label>
<select id="state">
<optgroup>
</optgroup>
</select></br>
<label for="zip">Zip Code:</label>
<input id="zip" type="text" placeholder="01234">
</div>
</form>
</div>
Does you talk about that the div and form have height:0 and the content overflow?
If so, it is because the content divs have float css attributes. to fi it, you have to add at the end of the contents div with style clear:both
<div class="form">
<form>
<div class="contact">
...
</div>
<div class="address">
...
</div>
<div style="clear:both"></div>
</form>
</div>
thanks for reading, i have a quick question about emmet in Atom editor.
when i type this abbreviation (Example):
form>.form-group>label[for=name]+input.form-control#name[type=text][name=name]^.form-group>label[for=email]+input.form-control#email[type=text][name=email]
It expands to:
<form action="">
<div class="form-group"><label for="name"></label><input type="text" class="form-control" id="name" name></div>
<div class="form-group"><label for="email"></label><input type="text" class="form-control" id="email" name="email"></div>
</form>
which is already useful, and better than typing it out all the way. but i would like it to expand to:
<form action="">
<div class="form-group">
<label for="name"></label>
<input type="text" class="form-control" id="name" name>
</div>
<div class="form-group">
<label for="email"></label>
<input type="text" class="form-control" id="email" name="email">
</div>
</form>
i know it's not that big of a deal but it would make it a lot easier.
could anyone please help in getting the below layout using HTML5 and bootstrap.
i want the Name label always on left and the Formatted checkbox always on right and the three textboxes share the remaining space evenly.click here for required layout
Code I tried
<form class="form-inline">
<div class="form-group">
<label for="FirstName">Name:</label>
<input type="text" class="form-control inputText" id="txtFirstName" placeholder="First Name" name="txtFirstName">
</div>
<div class="form-group">
<label for="MiddleName" class="sr-only">Middle Name:</label>
<input type="text" class="form-control inputText" id="txtMiddleName" placeholder="Middle Name" name="txtMiddleName">
</div>
<div class="form-group">
<label for="LastName" class="sr-only">Last Name:</label>
<input type="text" class="form-control inputText" id="txtLastName" placeholder="Last Name" name="txtLastName">
</div>
<div class="checkbox">
<label><input type="checkbox"/>Formatted</label>
</div>
</form>
There are many ways to do this but I would suggest you look at this bootstrap page https://v4-alpha.getbootstrap.com/components/forms/
I have made two forms for registering. When i add the code below to the page the second field automatically drops down below the first one. I would like it to go besides it.
<h1>Register</h1>
<input type="text" class="form-control" placeholder="Forename" autofocus style="width:150px">
<input type="text" class="form-control" placeholder="Surname" autofocus style="width:150px">
here is an example of what it looks like in normal html (currently) and that is what i want it to look like. But in bootstrap it keeps taking new line
Reference the inline form styling on Bootstrap's site.
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
</form>
Alternatively, you can also use columns to put form elements next to one another:
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>