So I am new to coding and am just trying to make a simple background project for something a friend and I thought up. I am using HTML for this just to start.
I want to make a list of checkboxes with the fifty states and a progress bar. Now as you click each state's checkbox the bar fills up and then when you have clicked all fifty then a check box at the top of the screen next to the progress bar is checked and there is a small saying under each saying Congratulations!
If anyone can help me I would be greatly appreciative!
Thank you, Kaxwell.
It is unfortunately not possible to perform all this using only HTML. You can build form etc. with HTML. The logic has to be managed by some other language. I suggest JavaScript in this case. Have a look at W3Schools to start with it.
Good luck
Using bootstrap and JQuery, you could achieve it:
<div class="container-fluid">
<div class="row">
<div class="col-xs-10">
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-xs-2">
<input id="ccomplete" class="form-control" type="checkbox" />
</div>
</div>
<div id="main" class="row">
<input class="form-control" type="checkbox" />
</div>
</div>
Here is the JSFiddle demo with the complete code
I encourage you to learn javascript/jquery for such manipulations.
The above demo uses JQuery and Bootstrap frameworks.
Related
<div class="row mb-3">
<div class="col-6">
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" >
<input type="text" id="startLocation" class="form-control" placeholder="von Bahnhof / Haltestelle / Adresse" tabindex="-1">
</div>
</form>
</div>
<div class="col-6">
<input type="text"id="destination" class="form-control" placeholder="nach Bahnhof / Haltestelle / Adresse" tabindex="-1">
</div>
</div>
I want my two text inputs to be the same with and toghther fill the total width. The Problem is the "startLocation does not have the correct width. I think its because its nested inside another element but I need the other element to have the class autocompleted so I don't know how to fix this.
Sorry If this is a stupid beginner question. Im new to html and bootstrap.
What is the "mb-3" class for in row?
Did you mean md-3? Which you would only need to set column widths (if you're using bootstrap).
Open the developer tools and check the padding and margin around the form. The form itself, and the nested div are probably taking up some space. Also the inputs have different parents so your styling might not be targeting the right selector.
I'm VERY new to boot strap. So I figured I would setup a small "form" to see if I could get it to flow and I did an absolute horrible job. I am trying to get things to group into 2's and no more than 5 text boxes per row even in the largest of settings. When I try to set it properly I get TONS of space between the left and right columns.
I tried setting the header but this wrapped strangely and when I tried doing text boxes I got TONS of space between the two columns
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3>Quick Survey for Professional Research!</h3>
</div>
. I ended up getting something kind of close using
<div class="row">
<div class="input-group text-center">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
But that doesn't seem like its the proper way to handle groups of text boxes and it certainly doesn't get me my grouping that I was looking for. I have set a mockup in jsfiddle from my ASP.net code and it can be found at https://jsfiddle.net/5ckoapng/9/
Any help would be greatly appreciated in understanding what i'm missing here. I'm sure its really stupid but I've spent about 2 hours researching different forms or formatting and couldn't figure this out.
Bootstrap is mobile first - if an element is going to span 12 columns on all resolutions then all you need is the single class:
<div class="container">
<div class="row">
<div class="col-xs-12">
<h3>Quick Survey for Professional Research!</h3>
</div>
</div>
</div>
To show form elements in groups of 2, then you need to nest columns: http://getbootstrap.com/css/#grid-nesting
For example:
<div class="container">
<div class="row">
<div class="col-xs-12">
<form>
<div class="row">
<div class="col-xs-6">
#form input
</div>
<div class="col-xs-6">
#form input
</div>
</div>
</form>
</div>
</div>
</div>
That way there will be 2x 50% (col-xs-6) width columns nested within the main 100% (col-xs-12) column. I have not added form styling or classes, as these are all readily available in the documentation: http://getbootstrap.com/css/#forms
If you wish to use 5 nested columns, then you can utilise the offset class to push 5x col-xs-2 columns over by 1 so they appear to be centred within the main col-xs-12 column: http://getbootstrap.com/css/#grid-offsetting
So I have started using Foundation. Very nice indeed.
And I am using Foundation's custom "Radius Button", to make a "mailto:" form.
Basically, all I can find online are the ugly default HTML buttons/labels.
Is there a way I can use this button and Foundation's "Input Label's" to create a "mailto:" form?
Here is the source code for the buttons/labels all sorted out:
<div class="row">
<div class="large-12 columns">
<div class="panel">
<h3>Survey</h3>
<p>I'm looking into what to create, but need ideas!
Anything will help, and the time it takes you to fill one out, is nothing!</p>
<div class="row">
<div class="large-4 medium-4 columns">
<label>Email (Optional)</label>
<input type="text" placeholder="Email" />
</div>
<div class="large-4 medium-4 columns">
<label>Idea Subject (What's it about?)</label>
<input type="text" placeholder="Subject" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>What is your idea?</label>
<textarea placeholder="Idea"></textarea>
</div>
</div>
<div class="row">
<div class="large-4 medium-4 small-4 columns">
Send
Reset
</div>
</div>
</div>
</div>
</div>
I have never used Foundation before, but I assume, that unless you know the answer just by code, you could implement this into a pre-made Foundation "project".
But anyway, here is what the above HTML looks like when previewed:
See the Send & Reset? That's what I want to use to submit it and send it to me.
Thanks for any given help.
You have to use Javascript if you want to output what people have entered in a textbox. You can use these variables in your mailto:
&cc = to set the CC recipient(s)
&bcc = to set the BCC recipient(s)
&subject = to set the email subject, URL encode for longer sentences, so replace spaces with %20, etc.
&body = to set the body of the message, you can add entire sentences here, including line breaks. Line breaks should be converted to %0A.
So a link should look like this:
mail link
I started to use Foundation 5 for my web project, but it seems full of bugs, and the form validation just simply doesn't work. So I switched to Bootstrap.
However, there was a feature in Foundation called Pre/Postfix Labels & Actions (see here) and I want it in Bootstrap.
I have searched and searched but cannot find anything even remotely similar. I can use the glyphicon, glyphicon glyphicon-gbp, to show the "£" sign before my form input, however I am unable to get it to flow correctly using the grid system.
I have a JS Fiddle here: http://jsfiddle.net/kAnjN/
This is my HTML:
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label for="monthly_rent" class="col-sm-2 control-label">Monthly Rent</label>
<div class="col-sm-4">
<span class="glyphicon glyphicon-gbp"></span>
<input type="text" name="monthly_rent" class="form-control">
</div>
</div>
</form>
Does anyone have any advice? I am a PHP developer and front-end things like this frustrate me! Bootstrap and Foundation are supposed to make it easier and just "work" but I always have to search for hours for solutions to tiny problems.
I basically want to achieve what is on the Foundation link above.
Use the .input-group class:
<label for="monthly_rent" class="col-sm-2 control-label">Monthly Rent</label>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-gbp"></span>
</span>
<input type="text" name="monthly_rent" class="form-control">
</div>
</div>
Example
Im designing a website using Visual Studio 2012 ASP.NET MVC4
And it’s supposed to be like this
but it turned out to be like this
![default2][2]
I need to align the logo with the Username & Password fields and those fields should have space in between. Btw, I'm using the latest version of Twitter Bootstrap as my CSS. Thanks for helping out!
Also, these are my codes.
<header class="navbar navbar-inverse" role="banner">
<div class="container">
<img src="#Url.Content("~/Content/img/Logo-Sample.png")" alt="Image" id="logo" class="img-responsive"/>
<div class="pull-right">
<form class="navbar-form pull-right" role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
</div>
</div>
</header>
Update:
I've applied Ryan's suggestion the "float stuff" and the logo is now inlined with the input fields.
But the input field went upward instead of downward. Any suggestions for this? Thanks!
Check out Bootstrap's docs for Inline forms. I believe this is exactly what you are looking for.
As a side note, check out TwitterBootstrapMVC. Your code might look cleaner with it.
So it looks like your logo and login sections are both block-level elements. They need to be inline-block OR one of them needs to be floated left or right as appropriate.
Insofar as the space between elements for your login block... I'd do a css selector to match the header login input elements and add some margin-right to them.
HTML formatting is very finicky sometimes. However, open up the markup for the asp file and put a space between those input areas' tags or put one trailing after the word in the placeholder. For the being slightly too high, I forgot the word I am looking for, but its something a bit like a table, make them both in slots for that row. Look around for what Im attempting to say as I just completely forgot the term.
(if I remember Ill come back and edit this)