How can I place buttons next to input texts like in this photo?
I've this code:
<form action='/posts/comment/{{id}}' method='POST'>
<input class="form-control" type="text" name='comment' id='comment' placeholder="Comment as {{name}}..." aria-label="Comment as {{name}}...">
</form>
Answering based on question and screenshot.
button{
margin-left:-6px;
border-left:none;
}
<form action='/posts/comment/{{id}}' method='POST'>
<input class="form-control" type="text" name='comment' id='comment' placeholder="Comment as {{name}}..." aria-label="Comment as {{name}}...">
<button>Save Comment </button>
</form>
Related
My Formsubmit doesn't work.
Even using the simple example on the site my submit button doesn't send. I can't even send the verification to my email.
I'm using Angular.
<form action="https://formsubmit.co/matheusproencaescola#hotmail.com" method="POST">
<input type="text" name="name" required>
<input type="email" name="email" required>
<button type="submit">Send</button>
</form>
EDIT: he problem is the button seems to have no function, it doesn't work at all.
I know it is a little late, but try this:
<form #form action="https://formsubmit.co/matheusproencaescola#hotmail.com" method='POST'>
<input type="text" name="name" required>
<input type="email" name="email" required>
<button type="submit" (click)="form.submit()">Send</button>
</form>
Try replace
<button type="submit">Send</button>
by:
<input type="submit" value="Send"/>
Complete Code:
<html>
<body>
<form action="https://formsubmit.co/matheusproencaescola#hotmail.com" method="POST">
<input type="text" name="name" required/>
<input type="email" name="email" required/>
<input type="submit" value="Send"/>
</form>
</body>
</html>
Edited: Right! I used button tag and it works too.
When I click on button, it redirects to:
https://formsubmit.co/matheusproencaescola#hotmail.com
What happen in your case ?
when I click the 'save new post' button and the title and body content are provided then the action of sending a request is successfull, but if I leave one field blank, than the request isn't even made.
this is my code:
<form action="/create-post" method="POST">
<div class="form-group">
<label for="post-title" class="text-muted mb-1"><small>Title</small></label>
<input required name="title" id="post-title" class="form-control form-control-lg form-control-title" type="text" placeholder="" autocomplete="off">
</div>
<div class="form-group">
<label for="post-body" class="text-muted mb-1"><small>Body Content</small></label>
<textarea required name="body" id="post-body" class="body-content tall-textarea form-control" type="text"></textarea>
</div>
<button class="btn btn-primary">Save New Post</button>
</form>
And this is what I get when I leave a field blank:
form behavor after submitting empty field
in the image, 'Compila questo campo' just means 'Fill in this field'
Edit:
thank you for reminding me that it’s because of the required field, but then why is that in this example i can't submit if the title field is empty but can if the body is empty?
<form class="mt-3" action="/post/<%= post._id %>/edit" method="POST">
<div class="form-group">
<label for="post-title" class="text-muted mb-1"><small>Title</small></label>
<input required name="title" value="<%= post.title %>" id="post-title" class="form-control form-control-lg form-control-title" type="text" placeholder="" autocomplete="off">
</div>
<div class="form-group">
<label for="post-body" class="text-muted mb-1"><small>Body Content</small></label>
<textarea required name="body" id="post-body" class="body-content tall-textarea form-control" type="text"><%= post.body %>
</textarea>
</div>
<button class="btn btn-primary">Save Changes</button>
Note that this is a ejs template, so that's why it as <% and <%=
You have required attribute both of your inputs. So you can't submit this form in this way.
See here for details
For example in this example you can submit the form:
<!DOCTYPE html>
<html>
<body>
<h1>The button type attribute</h1>
<form action="#" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
</body>
</html>
But in this example you can't:
<!DOCTYPE html>
<html>
<body>
<h1>The button type attribute</h1>
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" required><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" required><br><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
</body>
</html>
Good luck.
You explicitly said that the user was required to fill in a value.
Don't do that if the field is optional.
Because your <input> and <textarea> tags have required attribute. Remove that attribute if you want to make them optional.
You are using required attribute with textbox and text area.
The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled out before submitting the form.
This is client side (browser side validation).
Reference
I know there quite a few people that say to get a multi-line input you need to use a textarea, but I can't because then it wouldn't be part of the form. Here is my code.
<form action="form.php" method="POST">
<input name="field1" type="text" value="type here" />
<input type="submit" name="submit" value="enter">
</form>
You can't. The only HTML form element that's designed to be multi-line is <textarea>
<form action="form.php" method="POST" id="myForm">
Name: <input type="text" name="usrname" />
<input type="submit" name="submit" value="enter">
</form>
<textarea name="comment" form="myForm"></textarea>
The texarea is outside the form, but by adding the ID of the <form> it's still a part of the form.
Is there a reason you can't use:
<form action="form.php" method="post">
<textarea name="field1"></textarea>
<input type="submit" name="submit" value="enter">
</form>
I have a search form that has a image as the button which is great, but i can't get the image to look the same as other text, i would like to remove this image and just use it as text instead then style it accordingly, if someone could give me some advice on doing this the simplest way possible that would be appreciated.
<form action=".php" method="get" onsubmit="return check_small_search_form()">
<label for="search_query"></label>
<input type="text" name="search_query" id="search_query" class="Textbox" value="Search" autocomplete="off">
<input type="image" src="Search.gif" class="Button">
</form>
Many thanks.
You can replace the image with a submit button and remove the borders and background with css. That should show just plain text
<form action=".php" method="get" onsubmit="return check_small_search_form()">
<label for="search_query"></label>
<input type="text" name="search_query" id="search_query" class="Textbox" value="Search" autocomplete="off" />
<input type="submit" value="The text you want" class="Button" />
</form>
I have a simple login form:
<form action="/users/login" class="form-inline" id="UserLoginForm" method="post" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST"/>
</div>
<input name="data[User][email]" class="input-small" placeholder="E-mail" maxlength="50" type="text" id="UserEmail"/>
<input name="data[User][password]" class="input-small" placeholder="Password" type="password" id="UserPassword"/>
<button class='btn' type='submit'>Login</button>
</form>
It is using bootstrap for styling. As for js jquery and AngularJS is loaded.
My issue is, when I display this form my submit button goes to the next line. If I inspect dom I see an <div class="actions">...</div> wrapper around my submit button. This does not happen if I omit type='submit' part from the form definition.
My question who is adding this wrapper and how can I avoid it.
If you see the examples of Twitter Bootstrap, I can see they are using two classes for form-inline example. Please check this. fro different types and form with buttons. Try applying well class along with it.
<form class="well form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>