I am developing my own website/application but I have a display problem on a title.
The web browser edge is in foreground and hide my title (Please, look at the picture with red rectangle to understand). The source code is bellow. I am doing something wrong ? I am using Bootstrap. Should I add CSS ?
<body>
<div id="divformulaire">
<h3>HERE IS MY PROBLEM:</h3>
<form method="post" action="requetes/creerMission.php" role="form" id="formulaire">
<hr/>
<input class="form-control" id="nothing1" name="nothing1" type="text" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing2" name="nothing2" type="text" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing3" type="number" name="nothing3" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing4" type="text" name="nothing4" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing5" type="text" name="nothing5" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing6" type="number" name="nothing6" placeholder="Nothing" required>
<hr/>
<span class="label label-default">Nothing</span>
<select class="form-control form-control-sm" id="nothing7" type="text" name="nothing7">
<option>Non</option>
<option>Oui</option>
</select>
<hr/>
<div class="form-group">
<label for="annonce">Nothing</label>
<textarea class="form-control" id="nothing8" name="nothing8" rows="3"></textarea>
</div>
<button class="btn btn-lg btn-primary btn-block" id="create" type="submit">Nothing</button>
</form>
</div>
</body>
Title problem
Your problem is that your div with the id of #divformulaire doesn't have any margin on the top. If you want the title to always be visible, you need to offset the entire div by roughly the amount of the browser topbar, where the URL is.
#divformulaire {
margin-top: 50px}
<body>
<div id="divformulaire">
<h3>HERE IS MY PROBLEM:</h3>
<form method="post" action="requetes/creerMission.php" role="form" id="formulaire">
<hr/>
<input class="form-control" id="nothing1" name="nothing1" type="text" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing2" name="nothing2" type="text" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing3" type="number" name="nothing3" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing4" type="text" name="nothing4" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing5" type="text" name="nothing5" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing6" type="number" name="nothing6" placeholder="Nothing" required>
<hr/>
<span class="label label-default">Nothing</span>
<select class="form-control form-control-sm" id="nothing7" type="text" name="nothing7">
<option>Non</option>
<option>Oui</option>
</select>
<hr/>
<div class="form-group">
<label for="annonce">Nothing</label>
<textarea class="form-control" id="nothing8" name="nothing8" rows="3"></textarea>
</div>
<button class="btn btn-lg btn-primary btn-block" id="create" type="submit">Nothing</button>
</form>
</div>
</body>
Related
when I submit this form, after entering some data, Gmail pops up but nothing is entered in it. What should I do so that the data I enter in the form gets entered in the email?
<form class="" action="mailto:exampl#gmail.com" method="post">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
You need to add the name attribute to each field, which will appear in the mail's body. It'll format itself as mail={your_message} and so on.
Your code becomes:
<form class="" action="mailto:exampl#gmail.com" method="post" enctype="text/plain">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com" name="email">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
JSFiddle
I have this form:
<div class="modal-body">
<form action="repository/add_new_task.php">
<div class="form-group">
<label for="street" class="col-form-label">Street</label>
<input type="text" class="form-control" id="street">
</div>
<div class="form-group">
<label for="phone" class="col-form-label">Phone</label>
<input type="text" class="form-control" id="phone">
</div>
<div class="form-group">
<label for="date" class="col-form-label">Date</label>
<div class="input-group date" id="datetimepicker" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" id="date" data-target="#datetimepicker">
<div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
<div class="form-group">
<label for="price" class="col-form-label">Price</label>
<input type="text" class="form-control" id="price">
</div>
<div class="form-group">
<label for="comment" class="col-form-label">Comment</label>
<textarea type="text" class="form-control" rows="3" id="comment"></textarea>
</div>
<div class="form-group">
<label for="job-type" class="col-form-label">Comment</label>
<select class="form-control" id="job-type">
<option value="0">Repair</option>
<option value="1">Multistory Pull In</option>
<option value="2">Multistory Weld</option>
<option value="3">Private Residence</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block" name="new-task-submit">Create task</button>
</form>
</div>
All I need to do is to make button disabled until all the fields (including datepicker and textarea) have values in them.
I tried following the answer in this post and while it worked I struggles to make it work for my datepicker and textarea. Can someone please help me figure this out
With just css you can use pointer events and make the button unclickable.
form:invalid [type="submit"] {
pointer-events: none;
border: 1px solid #999999;
background-color: #CCCCCC;
color: #666666;
}
<form>
<input type="text" required />
<input type="text" required />
<input type="text" required />
<input type="submit" />
You can use oninput and .disabled like so:
var field1 = document.getElementById("date");
var field2 = document.getElementById("phone");
var field3 = document.getElementById("price");
var field4 = document.getElementById("comment");
var field5 = document.getElementById("job-type");
var button = document.getElementById("btn");
function validate(){
if(!isEmpty(field1)&&!isEmpty(field2)&&!isEmpty(field3)&&!isEmpty(field4)&&!isEmpty(field5)){
btn.disabled=false;
}else{
btn.disabled=true;
}
}
function isEmpty(element){
if(element.value.length==0){
return true;
}else{
return false;
}
}
<div class="modal-body">
<form action="repository/add_new_task.php">
<div class="form-group">
<label for="street" class="col-form-label">Street</label>
<input type="text" class="form-control" id="street" oninput="validate()">
</div>
<div class="form-group">
<label for="phone" class="col-form-label">Phone</label>
<input type="text" class="form-control" id="phone" oninput="validate()">
</div>
<div class="form-group">
<label for="date" class="col-form-label">Date</label>
<div class="input-group date" id="datetimepicker" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" id="date" data-target="#datetimepicker" oninput="validate()">
<div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
<div class="form-group">
<label for="price" class="col-form-label">Price</label>
<input type="text" class="form-control" id="price" oninput="validate()">
</div>
<div class="form-group">
<label for="comment" class="col-form-label">Comment</label>
<textarea type="text" class="form-control" rows="3" id="comment" oninput="validate()"></textarea>
</div>
<div class="form-group">
<label for="job-type" class="col-form-label">Comment</label>
<select class="form-control" id="job-type" onchange="validate()">
<option value="0">Repair</option>
<option value="1">Multistory Pull In</option>
<option value="2">Multistory Weld</option>
<option value="3">Private Residence</option>
</select>
</div>
<button type="submit" id="btn" class="btn btn-primary btn-block" name="new-task-submit" disabled>Create task</button>
</form>
</div>
If the user has not entered any text into any of the fields, the button will be disabled automatically.
Following is the html code. All I wanted to know if there are limits to putting html elements for form designing.
<div class="container">
<h1>Add New Employee</h1>
<br>
<form action="process.php" method="post">
<div class="form-group">
<label for="name">Full Name:</label>
<input class="form-control" type="text" name="name">
</div>
<div class="form-group">
<label for="permanent_address">Permanent Address:</label>
<input class="form-control" type="text" name="permanent_address">
</div>
<div class="form-group">
<label for="marital_status">Marital Status:</label>
<select class="form-control" name="marital_status">
<option value="Married">Married</option>
<option value="Unmarried">Unmarried</option>
</select>
</div>
<div class="form-group">
<label for="gender">Gender: </label>
<input type="radio" value="Male" name="train">Male
<input type="radio" value="Female" name="train">Female
</div>
This is where the problem starts.
This is the reason i've disable phone number by commenting it becasue it is disabling the submit button.
<!-- <div class="form-group">
<label for="phone">Phone number: </label>
<input class="form-control" type="number" name="phone">
</div> -->
<div class="form-group">
<label for="admission_date">Admission Date: </label>
<input type="date" name="admission_date">
</div>
<div class="form-group">
<label for="Aadhar">Aadhar Number: </label>
<input class = "form-control" name="Aadhar">
</div>
<button class="btn btn-success" name="submitted">Add New Hire</button>
</form>
</div>
your code seems to run fine. There are no limits to how many elements you can have in a form - possibly limited my memory. Why do you think your form isn't working?
also for phone input try the following:
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required>
<div class="container">
<h1>Add New Employee</h1>
<br>
<form action="https://www.google.com" method="post">
<div class="form-group">
<label for="name">Full Name:</label>
<input class="form-control" type="text" name="name">
</div>
<div class="form-group">
<label for="permanent_address">Permanent Address:</label>
<input class="form-control" type="text" name="permanent_address">
</div>
<div class="form-group">
<label for="marital_status">Marital Status:</label>
<select class="form-control" name="marital_status">
<option value="Married">Married</option>
<option value="Unmarried">Unmarried</option>
</select>
</div>
<div class="form-group">
<label for="gender">Gender: </label>
<input type="radio" value="Male" name="train">Male
<input type="radio" value="Female" name="train">Female
</div>
This is where the problem starts.
This is the reason i've disable phone number by commenting it becasue it is disabling the submit button.
<div class="form-group">
<label for="phone">Phone number: </label>
<input class="form-control" type="number" name="phone">
</div>
<div class="form-group">
<label for="admission_date">Admission Date: </label>
<input type="date" name="admission_date">
</div>
<div class="form-group">
<label for="Aadhar">Aadhar Number: </label>
<input class = "form-control" name="Aadhar">
</div>
<button class="btn btn-success" name="submitted">Add New Hire</button>
</form>
</div>
you can check the link so you can check what I'm trying to say.
and here is the code that I wrote. for that form. I did not style the .
https://kevkevkevin.github.io/contactform_/
<div id="form_">
<h2>Contact Us</h2>
<form action="#">
<div class="form-group">
<label for="name">Name:</label>
<input type="name" class="form-control" id="name" placeholder="Your Name" name="name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="subj"><span>Subject</span>
<select name="sbj" class="form-control" id="slct_bg">
<option class="special" value="Appointment">Appointment</option>
<option class="special" value="Interview">Interview</option>
<option class="special" value="Regarding a post">Regarding a post</option>
</select>
</label>
</div>
<div class="form-group">
<label for="email">Message:</label>
<textarea class="form-control" rows="5" id="message" placeholder="Leave your message here*" required></textarea>
</div>
<a href=""><div class="button_">
Submit
</div> </a>
</form>
</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>