I need to click "SEND" once mobile number is entered in the input. I am using bootstrap material design css. Below is the html code I am using Any helps would be appreciated.
<div class="form-group">
<label for="mobile_no" class="bmd-label-floating form_input_label">Contact no</label>
<input type="text" class="form-control no-margin " id="mobile_no" style="width: 80%" placeholder="SEND">
</div>
CSS used is as below.
input[type="text"]::-webkit-input-placeholder {
text-align: right;
font-family: Lato;
font-size: 16px;
letter-spacing: 1px;
color: #00bcd4;
}
You could add a submit button:
<input type="submit" value="SEND" />
You could add a button:
<button type="button">SEND</button>
Or you could wrap something in an tag, as in:
<div class="form-group">
<a href="#">
<label for="mobile_no" class="bmd-label-floating form_input_label">Contact no</label>
</a>
<input type="text" class="form-control no-margin " id="mobile_no" style="width: 80%" placeholder="SEND">
</div>
The submit button is the most common solution.
Related
I have a list of forms that have to be compiled by the user. When opening the page I would like the first form the be already selected, so that the user doesn't have to click on it once the page is opened.
Thank you.
This is a little sample, once the page is opened the "Code" form have to be already selected.
<div class="formxx">
<div>
<label for="txCode" id="codeLabel">Code</label>
<input type="text" class="form-control" style="text-transform:uppercase" name="code" id="txCode" maxlength="4" tabindex="1" />
</div>
<div>
<label for="txDescription" id="descLabel">Description</label>
<input type="text" class="form-control" name="description" id="txDescription" tabindex="2" />
</div>
</div>
I also made a "view" on CodePen, here it is:
https://codepen.io/user23xx/pen/jKRpEe
Just use autofocus in a input field. example is below
.form-control {
height:20px
}
#txCode{
margin-bottom: 20px;
}
#codeLabel{
font-size: 1.2em;
font-family: arial;
margin-right: 15px;
font-weight: bold;
}
#descLabel{
font-size: 1.2em;
font-family: arial;
margin-right: 15px;
font-weight: bold;
}
<div class="formxx">
<div>
<label for="txCode" id="codeLabel">Code</label>
<input type="text" autofocus class="form-control" style="text-transform:uppercase" name="code" id="txCode" maxlength="4" tabindex="1" />
</div>
<div>
<label for="txDescription" id="descLabel">Description</label>
<input type="text" class="form-control" name="description" id="txDescription" tabindex="2"
/>
</div>
I assume you are talking of input elements not forms?
You just need to set the focus to the input element, you can do this by javascript:
document.getElementById('txCode').focus();
In my html i have two input tags and i want them on the same line, after i search and try more code.
It doesn't change anything, what wrong is my code?
<div class="form-group">
<label class="col-lg-3 control-label">Meaning:</label>
<div class="col-lg-8">
<div class="">
<div class="lnw">
<span class="inline">
<input class="form-control" type="text" name="meaning[]" id="meaning " style="float: right">
<input type="image" src="/images/pjdict/plus.png" alt="Submit" width="48" height="48" class="add_field_button">
</span>
<br>
</div>
</div>
</div>
</div>
You have give some width for input["type="text"] or input["type="image"] like below:
Otherwise you cad custom class in form-control class and replease this class to .form-control
See Bootply link
.form-control {
float: left !important;
width: 90%;
}
.add_field_button {
float: right;
text-align: center;
width: 10%;
}
There is no need for a float:right in your code a form could simple be put
<input type="text">
<input type="text">
and they will show up beside each other also you should always put the type first
simply you can use display:inline-block to container of input tags
<html>
<body><div class="form-group">
<label class="col-lg-3 control-label">Meaning:</label>
<div class="col-lg-8">
<div class="">
<div class="lnw">
<span class="inline" style="display:inline-block"> //inline-block added here
<input class="form-control" type="text" name="meaning[]" id="meaning " style="float: right">
<input type="image" src="/images/pjdict/plus.png" alt="Submit" width="48" height="48" class="add_field_button">
</span>
<br>
</div>
</div>
</div>
</div>
</body>
</html>
Please use the below code for the same.
.inline input[type="text"] {
float:left;
margin:10px 10px 0px 0px;
}
<div class="form-group">
<label class="col-lg-3 control-label">Meaning:</label>
<div class="col-lg-8">
<div class="">
<div class="lnw">
<span class="inline">
<input class="form-control" type="text" name="meaning[]" id="meaning " >
<input type="image" src="/images/pjdict/plus.png" alt="Submit" width="48" height="48" class="add_field_button">
</span>
<br>
</div>
</div>
</div>
</div>
You are setting the type of your input field to 'image', which according to this page isn't valid in bootstrap, and in general isn't valid for html. I can only guess what you're trying to do, but from the way things look, you want:
a text input field
a submit button to the right of the text input field
an image instead of the regular submit button appearance
If that is accurate, take a look at the following snippet:
#formElementContainer {
margin-top: 60px; /* this is only important for display within this snippet */
}
#formElementContainer input[type='text'] {
width: calc(100% - 50px);
}
#formElementContainer input[type='submit'] {
background: transparent url('https://www.gravatar.com/avatar/eb603bf5dd01c06880fdb8e4e1d04df3?s=32&d=identicon&r=PG&f=1') center center no-repeat;
border: none;
width: 32px;
height: 32px;
}
<div id="formElementContainer">
<input type="text" />
<input type="submit" value="" />
</div>
I am trying to create a message input box in a bootstrap form, however the box has to be of sufficient height so the user could read his message, the place holder of "message" would stay in the middle, also when I write the text it keeps going horizontally without considering margins, I am a newbie programmer so please don't be too harsh.
.theform {
margin-left: 200px;
margin-right: 200px;
margin-top: 50px;
border: 5px solid;
padding: 20px 20px 20px 20px;
}
.theform h1 {
font-size: 50px;
text-decoration: underline;
}
#formGroupExampleInput {
height: 50px;
}
.form-control {
font-size: 30px;
}
#messagebox {
height: 200px;
margin-right: 40px;
line-height: 0px;
}
#message {
height: 200px;
margin-right: 40px;
line-height: -20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="theform" id="link3">
<h1 class="text-center">Contact</h1>
<form>
<fieldset class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" size="50">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" size="50">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" size="50">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="messagebox" placeholder="Message" size="50">
</div>
</div>
</fieldset>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
You have to use a textarea instead of an input. If you want to center the placeholder vertically, you also have to use some JS, just to adjust the textare.
Just look into this codepen for an example implementation of a vertical centered textarea:
https://codepen.io/desandro/pen/gICqd
NO JS REQUIRED
you can fix this issue by puting the text area :
<textarea name="" id="" cols="30" rows="10"></textarea>
by default in text area the placeholder is sent to the top left.
Don't make the mistake of puting input instead because when you will give it a huge height the placeholder will be sent to the middle left !!!
I am trying to make a search bar using html/bootstrap/Jquery which looks similar to the search bar found here:
https://us.letgo.com/en
So far I have that design but with only one text box:
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-offset-3 col-md-6">
<form class="" action="next_page.php" method="GET">
<div class="form-group" id="search_wrapper">
<input type="text" id="search_field" class="form-control" name="search_title" placeholder="Search By Name">
<button type="submit" id="search_button" class="btn btn-default">Search</button>
css
#search_field {
background-transparent;
height:40px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-color: #CCCCCC;
outline: none;
}
#search_button {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
position:absolute;
top:0;
right:0;
font-size: 17px;
width:120px;
height:40px;
}
#search_wrapper{
height:40px;
position:relative;
}
When I add another input between the button and input between the input and button, the input just displays below both the button and the text box.
<input type="text" id="search_field" class="form-control" name="search_place" placeholder="Search By Place">
EDIT 1
I made a jsfiddle
https://jsfiddle.net/7v6hc9sz/1/
If that doesnt just link you to it, please let me know in a comment that it doesn't work. I have never used jsfiddle before.
I would recommend leveraging the Bootstrap native styles to the maximum extent possible, as they give you a robust set of tools to build your site.
For this particular issue, you're looking for Bootstrap's Inline Form styles.
Here's an example from their docs:
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
You also are looking for Bootstrap Input Groups which will allow you to "pair" the button to the right of the last input.
Note the following things about that code:
1. The form has a class of form-inline. This is important, as it tells Bootstrap to line things up inline.
2. Each pair of label / inputs gets wrapped in a div with the class form-group. This tells Bootstrap to display this "group" (label and input) inline.
3. Each input gets a class of form-control. This tells bootstrap to style it up as an input.
Now, applying those classes to your markup, to achieve what you want, would look something like this:
<!-- Add the class "form-inline" -->
<h3>
Important:<br>form-inline does not appear correctly unless you make the preview pane wide!
</h3>
<form class="form-inline" action="next_page.php" method="GET">
<div class="form-group">
<input type="text" id="search_field" class="form-control" name="search_title" placeholder="Search By Name">
<!-- close the "form-group" div and start a new div -->
</div>
<!-- here we use "input-group" to get the submit tight "against" the input -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button type="submit" id="search_button" class="btn btn-default">Search</button>
</span>
</div>
</form>
Here's a Working Fiddle
You just need to make an inline form - the bootstrap website has examples.
It looks like this:
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="inputOne">Input One</label>
<input type="text" class="form-control" id="inputOne" placeholder="Input Two">
</div>
<div class="form-group">
<label class="sr-only" for="inputTwo">Input Two</label>
<input type="text" class="form-control" id="inputTwo" placeholder="Input Two">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
Working bootply
Here's a bootply with connected fields by Rachel S
I had to create a custom CSS class to override the default margins for this form:
margin-right: -10px;
As well as remove the rounded corners of the following input element:
border-top-left-radius: 0;
border-bottom-left-radius: 0
See working demo below (need to see in in full-page).
You'd need to add this to your nav bar, of course.
.my-search {
padding: 1px;
margin-right: -10px;
display: inline-block;
}
.my-search2 input#search2 {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>my attempt</h2>
<hr/>
<form class="form-inline">
<div class="form-group">
<div class="input-group my-search">
<input type="text" class="form-control" id="search1" placeholder="s1">
</div>
<div class="input-group my-search2">
<input type="text" class="form-control" id="search2" placeholder="s2">
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</div>
</div>
</div>
</form>
I am trying to add a new contact form into my already running website.
I downloaded an HTML snippet & added it to my page. Here the downloaded code.
The code is built using bootstrap framework. It looks good. But when I implemented it into my website, some things didn't fit in places. The upload element is outlined. It doesn't remain in style. And the button has overflowed the div.
I want to align them properly. Any help??
Style:
.contact-info h4 {
color: #8F99A4;
font-size: 1.6em;
font-weight: 300;
margin-top: 10px;
}
.contact-info h3 {
text-transform: uppercase;
font-weight: bold;
font-size: 1.6em;
margin-top: 10px;
}
.contact-us {
padding: 3em 0;
}
HTML
<div class="col-md-6 contact">
<div class="contact-info">
<h4>Contact Us</h4>
<h3>FOR MORE INFORMATION</h3>
<div class="hril">
<div class="rounded-1">
<img src="images/rounded-2.png" class="img-responsive" alt=""/>
</div>
<form action="" id="contactus" method="post" enctype="multipart/form-data">
<input name="frmname" style="width: 80%" type="text" class="text" required="required" placeholder="Enter Your Full Name">
<input name="phonenumber" style="width: 40%" type="number" class="text" required="required" placeholder="Phone Number"/>
<input name="frmemail" type="email" style="width: 40%" class="text" placeholder="Email Id" required/>
<textarea name="comments" style="width: 80%" required="required" placeholder="Comments & Questions"></textarea>
<div>
<input placeholder="resume" type="file" style="width: 80%">
</div>
<input name="submit_button" type="submit" value="SEND" />
</br>
</form>
</div>
</div>
</div>
Along with the advice from the comments, for the form, bootstrap has a form documentation here: Bootstrap form documentation. you should try something along the lines of this( give it your own dimension and criteria):
<form class="form-horizontal">
<div class="form-group">
<label for="frmname" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input name="frmname" style="width: 80%" type="text" class="text" required="required" placeholder="Enter Your Full Name">
</div>
</div>
</form>
I had to make a few changes in the css section.
.hril{
background-color:#F9F9F9;
height: 400px;
margin-top: 5em;
position: absolute;
border-radius: 5px;;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
padding-top: 5em;
}
Changed the height to 400px; That solved the button issue.
Added a new style for input file element.
input[type=file]
{
width: 46%;
font-weight: 400;
padding: 10px;
color: #A0A8B2;
font-size: 14px;
padding-left: 60px;
}
Well...That was it. Problem Solved.