I am having some trouble getting the two form inputs in a single horizonatal line.
You can see here:Two Form Inputs
Here is my code:
<form action="index.php" method="post">
<div class="group" style="display: inline;">
<input type="text" name="name" id="name" placeholder="Enter Username" style="width: 20%;"/>
<textarea name="msg" id="msg" placeholder="Enter Message" style="width: 75%;"></textarea>
</div>
<div style="clear: both;"></div>
<input type="submit" name="submit" id="sbtbtn" value="Send Message"/>
</form>
Please let me know how can i set them in a single horizontal line.
<form action="index.php" method="post">
<div class="group" style="display: flex;">
<input type="text" name="name" id="name" placeholder="Enter Username" style="width: 20%;"/>
<textarea name="msg" id="msg" placeholder="Enter Message" style="width: 75%;"></textarea>
</div>
<div style="clear: both;"></div>
<input type="submit" name="submit" id="sbtbtn" value="Send Message"/>
</form>
Try using a display: flex for the .group
I changed my input type from textarea to text and this did my job.
<form action="index.php" method="post">
<div class="group" style="display:flex;">
<input type="text" name="name" id="name" placeholder="Enter Username" style="width: 20%;"/>
<input type="text" name="msg" id="msg" placeholder="Enter Message" style="width: 80%;"/>
</div>
<div style="clear: both;"></div>
<input type="submit" name="submit" id="sbtbtn" value="Send Message"/>
</form>
Thanks for helping me out.
<form action="index.php" method="post">
<div class="group" style="display:flex !important;">
<input type="text" name="name" id="name" placeholder="Enter Username" style="width: 20%;"/>
<textarea name="msg" id="msg" placeholder="Enter Message" style="width: 75%;"></textarea>
</div>
<div style="clear: both;"></div>
<input type="submit" name="submit" id="sbtbtn" value="Send Message"/>
</form>
<form action="index.php" method="post">
<div class="group" style="display: inline;display:flex;">
<input type="text" name="name" id="name" placeholder="Enter Username" style="width: 20%;"/>
<textarea name="msg" id="msg" placeholder="Enter Message" style="width: 75%;"></textarea>
</div>
<div style="clear: both;"></div>
<input type="submit" name="submit" id="sbtbtn" value="Send Message"/>
</form>
Related
Well I got this code
<html>
<div class="form">
<h2>Login to your account</h2>
<form action="#" method="post">
<input type="text" name="Username" placeholder="Username" required=" ">
<input type="password" name="Password" placeholder="Password" required=" ">
<div class="g-recaptcha" data-sitekey="thecode"></div>
<input type="submit" value="Login">
</form>
</div>
<div class="form">
<h2>Create an account</h2>
<form action="#" method="post">
<input type="text" name="Username" placeholder="Username" required=" ">
<input type="password" name="Password" placeholder="Password" required=" ">
<input type="email" name="Email" placeholder="Email Address" required=" ">
<input type="text" name="Phone" placeholder="Phone Number" required=" ">
<div class="g-recaptcha" data-sitekey="thecode"></div>
<input type="submit" value="Register">
</form>
</div>
</html>
However it doesn't load in the form like i didn't add the captcha code .. any solutions ?
Can you provide more info?Did you add recaptcha sdk in head section?And do you use correct keys?Also check if you correctly add domain in Domains list.
<form action="/contact/submit" method="POST">
<br style="clear:both">
<p style="margin-bottom: 25px; text-align: center; font-size: 20px"><b>Contact Form</b></p>
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
</div>
<div class="form-group">
<input type="number" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required>
</div>
<div class="form-group">
<input class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140"></input>
<span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>
</div>
<button type="submit" id="submit" name="submit" class="btn btn-primary pull-right">Submit Form</button>
</form>
What I get when I console log the req.body of this post using console.log(req.body) is
{ name: 'aa',
email: 'xyz#gmail.com',
mobile: '232',
subject: 'yo',
submit: '' }
But not the the message.
Textarea is not a type of input, it's an element itself...
<textarea id="message" name="message"></textarea>
How do I change the position of this form, with an absolute position?
<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
<div class="row">
<label for="name">Jouw naam:</label><br />
<input id="name" class="input" name="name" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Jouw email:</label><br />
<input id="email" class="input" name="email" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="message">Jouw bericht:</label><br />
<textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
</div>
<input id="submit_button" type="submit" value="Send email" />
</form>
you can add a css selector by selecting the form id of contact_form and adding a rule for positon
<style>
#contact_form {
position: absolute;
}
</style>
<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
<div class="row">
<label for="name">Jouw naam:</label><br />
<input id="name" class="input" name="name" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Jouw email:</label><br />
<input id="email" class="input" name="email" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="message">Jouw bericht:</label><br />
<textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
</div>
<input id="submit_button" type="submit" value="Send email" />
</form>
<body> <div id="div1"> <form id="f1">Personal Information<hr align="right" width="95%"> <div id="div2"><label>Name:</label><input id="text1" type="textbox" placeholder="First Name" size="20"> <input id="text2" type="textbox" placeholder="Last Name" size="20"><br/><br/></div> <div id="div3"><label>E-mail:</label><input id="text3" type="textbox" placeholder="EMail" size="20"><br/><br/></div> <div id="div4"><label>Date Of Birth:</label><input id="text4" type="textbox" placeholder="yyyy-mm-dd" size="20"><br/><br/></div> <div id="div5"><label>Other Details:</label><textarea id="text5" rows="10" cols="42" onkeyup=""/></div> <div id="div6"><input type="button" id="button1" value="Submit"></div>
but on writing this code button is not displayd what is wrong with the code
Textarea's end tag is required.
Replace
<textarea id="text5" rows="10" cols="42" onkeyup=""/>
for
<textarea id="text5" rows="10" cols="42" onkeyup=""></textarea>
Replace
<input type="button" id="button1" value="Submit">
For
<input type="submit" id="button1" value="Submit my form !">
You missed many tags, I am providing rectified code below.
<form id="f1">
Personal Information
<hr align="right" width="95%">
<div id="div2">
<label>
Name:
</label>
<input id="text1" type="textbox" placeholder="First Name" size="20">
<input id="text2" type="textbox" placeholder="Last Name" size="20">
<br/>
<br/>
</div>
<div id="div3">
<label>
E-mail:
</label>
<input id="text3" type="textbox" placeholder="EMail" size="20">
<br/>
<br/>
</div>
<div id="div4">
<label>
Date Of Birth:
</label>
<input id="text4" type="textbox" placeholder="yyyy-mm-dd" size="20">
<br/>
<br/>
</div>
<div id="div5">
<label>
Other Details:
</label>
<textarea id="text5" rows="10" cols="42" onkeyup="">
</textarea>
</div>
<div id="div6">
<input type="button" id="button1" value="Submit">
</div>
</form>
You missed Closing tags for Body, Form, Textarea and parent DIV.
I am using Bootstrap 3. I am just unable to create message box which should have 4 rows inside. can anyone please help me? My code is below:
<div class="row">
<div class="col-lg-12">
<form action="" method="POST" enctype="multipart/form-data" id="form_id">
<div class="form-group">
<h5><label for="inputName">Name</label></h5>
<input type="text" name="career[name]" class="form-control" tabindex="1" placeholder="Enter your name" pattern="[a-zA-Z. ]{1,50}" required>
</div>
<div class="form-group">
<h5><label for="inputEmail">Email</label></h5>
<input type="email" name="career[email]" class="form-control" tabindex="2" placeholder="Enter your email address" required>
</div>
<div class="form-group">
<h5><label for="inputMobile">Mobile</label></h5>
<input type="tel" name="career[mobile]" class="form-control" tabindex="3" placeholder="Enter your mobile number" pattern="[0-9]{10}" maxlength="10" required>
</div>
<div class="form-group">
<h5><label for="inputMessage">Message</label></h5>
<input type="text" name="career[message]" class="form-control" tabindex="4" placeholder="Write your details" required>
</div>
<button type="submit" name="submit" class="btn btn-primary btn-block" tabindex="5">Submit</button>
</form>
</div>
</div>
I want my message box something like this.
Your problem is you are not using textarea! Replace the below code:
<input type="text" name="career[message]" class="form-control" tabindex="4"
placeholder="Write your details" required>
With:
<textarea name="career[message]" class="form-control" tabindex="4"
placeholder="Write your details" required></textarea>