I want to make a website which includes a questionnaire that visitors will fill in. Here is what I have:
<html>
<head>
</head>
<body>
<form method="post" action="index.php">
<label>Name:</label>
<input name="name" placeholder="Name">
<label>Email:</label>
<input name="email" type="email" placeholder="Email">
<label>Price:</label>
<select name="price" option="Free,1p - £1,£1 - £5,£5 - £10,£10 - £20,£20+"
<label>Comment:</label>
<textarea name="message" placeholder="Do you want to say anything else?"></textarea>
<input id="submit" name="submit" type="submit" value="submit">
</form>
</body>
</html>
Most of it works, I can't get the drop down to work for some reason. Can you help please?
Your <select> element is wrong. You need to have child <option>s. See here: https://www.w3schools.com/html/html_form_elements.asp
So, more like:
<select name="price">
<option value="0">Free</option>
<option value="0to1">1p - £1</option>
<option value="1to5">£1 - £5</option>
<!-- etc -->
</select>
Related
Ok. I was informed to post one issue at a time so, thus, I will do such. The first issue is the Script and Form Elements. This is what the problem states:
Add a script element to the document head that loads the cg_script.js file.
Scroll down to the section element and insert a web form element that employs the action at http://www.example.com/cg/register via the post method.
Add the labels and input boxes shown previously in the figure in the Introduction step and described in the figure below. Place the input boxes directly after the labels and associate each label with its input box control. You do not need to enclose the label and input elements with div elements.
The issue is that the program will not tell me what is wrong with what I had done so I need some aid to help figure out where to go from here.
The code below detail what I had done for this already. I really have no clue what the program wants from me at this point. Any suggestions would be most appreciated.
<section>
<h1>Conference Registration Form</h1>
<p>Required Item (*)</p>
<form action="http://www.example/cg/register" method="post">
<!-- title -->
<div>
<label for="title">Title</label>
<input type="text" name="title" id="titleBox" list="titleList">
<datalist id="titleList">
<option value="Mr."></option>
<option value="Mrs."></option>
<option value="Ms."></option>
<option value="Prof."></option>
<option value="Dr."></option>
<option value="Assist. Prof."></option>
<option value="Assoc. Prof."></option>
</datalist>
</div>
<!-- firstName -->
<label for="firstName">First Name*</label>
<input type="text" name="firstName" id="fnBox" required>
<!-- LastName -->
<label for="lastName">Last Name*</label>
<input type="text" name="lastName" id="lnBox" required>
<!-- address -->
<label for="address">Address*</label>
<textarea name="address" id="addBox"></textarea>
<!-- Company or University -->
<label for="group">Company or University</label>
<input type="text" name="group" id="groupBox">
<!-- E-mail -->
<label for="email">E-mail*</label>
<input type="email" name="email" id="mailBox" required>
<!-- Phone Number -->
<label for="phoneNumber">Phone Number*</label>
<input type="tel" name="phoneNumber" id="phoneNumber" required pattern="^\d{10}$|^(\(\d{3}\)\s*?\d{3}[\s-]?\d{4}$" placeholder="(nnn) nnn-nnnn">
<!-- ACGIP Membership -->
<label for="acgipID">ACGIP Membership Number</label>
<input type="text" name="acgipID" id="idBox" placeholder="acgip-nnnnnn" pattern="^acgip\-\d{6}$">
<!-- Registration Category -->
<label for="regList">Registration Category</label>
<select id="regList" name="">
<option value="member">ACGIP Member ($695)</option>
<option value="nonmember">ACGIP Non-Member ($795)</option>
<option value="student">ACGIP Student ($310)</option>
<option value="poster">ACGIP Poster ($95)</option>
<option value="guest">ACGIP Guest ($35)</option>
</select>
<!-- Button -->
<p><input type="submit" name="continue" value="Continue"></p>
</form>
</section>
fix the phonenumber code line replace it with this
<!-- Phone Number -->
<label for="phoneNumber">Phone Number*</label>
<input type="text" name="phoneNumber" id="phoneBox" placeholder="(nnn) nnn-nnnn" pattern="^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$"required/>
I'm required to use only HTML to create a web form in which the search result will link me to the external website's search results. There are search options with filters that I have included and when I enter the input and select the filters, it links me to the external website but it does not filter out the search from my own web form, meaning that it would treat any search as a normal search without the filters for 'month', '6months' and 'year' option.
https://www.worldscientific.com/search/advanced - The website that I am supposed to link the search result from my web form to.
HTML Code:
<html>
<style>
*{
box-sizing: border-box;
}
#border1 {
width: 1000px;
height: 500px;
padding: 15px;
border: 2px;
}
</style>
<h2>Part 3 - World Science</h2>
<form id="worldscience_search-form"
action="https://www.worldscientific.com/action/doSearch?field1=AllField&text1=text1&publication=&Ppub=&AfterMonth=&AfterYear=&BeforeMonth=&BeforeYear=&earlycite=on" method="get" target="_blank" class="jcf-select" autocomplete="off">
<div id="border1">
<div style = "float:left; width:20%">
<select id="textArea2" name="field1" style = "height:40px; width:120px;">
<option value="AllField">Anywhere</option>
<option value="Title">Title</option>
<option value="Contrib">Author</option>
<option value="Keyword">Keywords</option>
<option value="Abstract">Abstract</option>
</select>
<br><br><br>
<label for="publication">Published in</label> <br><br><br>
<label>Publication Date</label>
<input type="hidden" value="AfterYear">
<input type="hidden" value="BeforeYear">
<br>
</div>
<div style = "float:left; width:20%">
<input type="text" placeholder="Enter Search term" name="text1" style = "width: 500px; height:40px"><br><br>
<input type="text" name="publication" placeholder="e.g. Journal of Theoretical Biology" style = "width:500px; height :40px">
<br><br><br>
<input type="radio" name="Ppub" value="" checked="checked">
<label>All dates</label>
<br><br><br>
<input type="radio" name="Ppub" value="">
<label>Last</label>
<br><br><br>
<input type="radio" name="Ppub" value="">Custom Range
</div>
<div style = "float:left; width:50%">
<br><br><br><br><br><br><br><br><br><br>
<select id="Ppub" value="" style = "height:40px; width:120px;">
<option value="">Select</option>
<option value="20181218-20190118">month</option>
<option value="20180718-20190118">6 months</option>
<option value="20180118-20190118">year</option></select><br><br>
<input type="submit" value="Search" />
</div>
</form>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br>
</html>
I don't think that I should have coded the values in the option value. How am I supposed to filter out without coding in the dates?
You have to use hidden inputs: (I only show start of the form)
<form id="worldscience_search-form" action="https://www.worldscientific.com/action/doSearch" method="get" target="_blank" class="jcf-select" autocomplete="off">
<input type="hidden" name="field1" value="AllField">
<input type="hidden" name="text1" value="text1">
<input type="hidden" name="publication" value="">
<input type="hidden" name="Ppub" value="">
<input type="hidden" name="AfterMonth" value="">
<input type="hidden" name="AfterYear" value="">
<input type="hidden" name="BeforeMonth" value="">
<input type="hidden" name="BeforeYear" value="">
<input type="hidden" name="earlycite" value="on">
<!DOCTYPE html>
<html>
<body>
<form action="" method="post" enctype="text/plain">
IP Address:<br>
<input type="text" name="" placeholder=""><br>
Port:<br>
<input type="text" name="" placeholder=""><br>
Game:<br>
<input type="text" name="" placeholder="" ><br>
Type:<br>
<input type="option" name="Type" size="50"><br><br>
<select name="cars">
<option value="volvo">Volvo XC90</option>
<option value="saab">Saab 95</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
I want to send this to mail when I write the right action="mailto:....." I can send only the input things, but not select tag selected option i tried any of this things separately it works but when i wanna do this with one button it doesn't works...
you can use in your HTML somthing like this :
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type="email" name="email" placeholder="Email" id="Email"><br>
<input type="text" name="titre" placeholder="Title" id="Title"><br>
<textarea name="content" placeholder="Content" id="Content"></textarea><br>
<button id="send">send</button>
Now using jquery add this :
$("#send").click(function(){
var email=$('#Email').val();
var title=$('#Title').val();
var content=$('#Content').val();
document.location.href = "mailto:"+email+"?subject="+title+"&body="+content;
});
for the options tag in your select you have to know that you can only send the selected value from options inside the select tag
hope this will help you.
Okay guys, im starting to learn HTML so im a newbie at the moment. I wrote this code to practice my input types (such as password, email, text etc). I would like to know how I can reset the whole form with one button. E.g.:
<input type="reset" value="reset">
The above code should be able to reset the whole form.
In my code, I have multiple forms and fieldsets:
<! DOCTYPE HTML>
<html>
<head>
<title>Tutorial 5 </title>
</head>
<body>
<form>
<fieldset>
<legend>Personal Details</legend>
<p><label for="name">First name:</label>
<input id="name" name="name" type="text" /></p>
<p><label for="surname">Surname:</label>
<input id="surname" name="surname" type="text" /></p>
<p><label for="dob">Date of Birth:</label>
<input id="dob" name="dob" type="text" size="5" /></p>
<p><label for="email">E-Mail address: </label>
<input id="email" name="email" type="email" /></p>
<p><label for="address">Address:</label>
<textarea id="address" name="address" type="text" rows="5" cols="30"></textarea> </p>
<p><label for="postcode">Postcode:</label>
<input name="postcode" id="postcode" type="text" size="5"></input> </p>
</fieldset>
</form>
<form>
<fieldset>
<legend> Password and PIN </legend>
<p><label for="password"> Password </label>
<input id="password" name="password" type="password"></input> </p>
<p><label for="passwordRetype">Retype Password</label>
<input id="passwordRetype" name="passwordRetype" type="password"></input> </p>
<p><label for="memorableQuestion"> Memorable question</label>
<select id="memorableQuestion" name="memorableQuestion">
<option value="ChildhoodFriend"> Who was your childhood friend? </option>
<option value="Street"> Whats the street you grew up in? </option>
<option value="Food"> Whats your favorite food? </option>
</select> </p>
<p><label name="answerToQ"> Answer to memorable question: </label>
<input id="answerToQ" name="answerToMemorableQuestion" type="text"</input> </p>
</fieldset>
</form>
<form>
<fieldset>
<legend>Feedback</legend>
<p><label for="radio"> Where did you hear about us mostly?</label>
<p id="radio">
<input type="radio" name="feedback" value="social_media">Social Media<br>
<input type="radio" name="feedback" value="advertisement">Advertisement<br>
<input type="radio" name="feedback" value="Radio_ad">Radio Advertisement<br>
</p></p>
<p><label for="rate">Rate out service out of 10: </label>
<input id="rate" name="rate" type="text" size="2" /></p>
</fieldset>
</form>
</body>
</html>
As well as that, when I output it, I would like the text field to be aligned properly. (e.g. the textfields are all under each other and they all start at the same point... if you know what I mean.. is it possible to achieve this through float?)
After trying every method possible, I found this to be the simplest:
window.open(document.URL,'_self');
Typically you would use a single form to capture input with the submit / reset actions within it.
This is because the FORM element groups together the values within them in order to post back to the server or action of the form.
Therefore unless you expect the user to interact with the forms independently of each other then it makes little sense to split the form up. By combining into a single form the reset button will work.
For presentation purposes you should be using something like DIV elements or whatever makes sense for the layout you are trying to create.
I'm trying to post two different sets of mixed values. Each form will share some user submitted text like name and email.
<form method="post" action="url1">
<input type="hidden" name="donate" value="food">
<input type="hidden" name="days" value="30">
<input type="text" name="cans" value="5">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
<input type="submit" name="submit" value="join1"/>
</form>
<form method="post" action="url1">
<input type="hidden" name="donate" value="shoes">
<input type="text" name="pairs" value="">
<input type="text" name="style" value="">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
<input type="submit" name="submit" value="join2"/>
</form>
<possible dropdown>
It would be ideal to have Dropdown select between the two forms and submit.
Well, using only html you will get a problem as a submit button only submit its own form.
It's also not valid to have forms in other forms.
However, is a trick to accomplish your goal using javascript!
With a little function you can e.g. hide all other forms than one:
function showform(index){
var forms = document.forms;
for(var i=0;i<forms.length;i++)
forms[i].style.display=(i==index?"block":"none");
}
Then you only need to add the onchange-event on your dropdown-list and hide one of the forms by default.
This would result in something like this:
<html>
<head>
<style language="css" type="text/css">
form input{display:block;width:100px;}
</style>
<script language="javascript" type="text/javascript">
function showform(index){
var forms = document.forms;
for(var i=0;i<forms.length;i++)
forms[i].style.display=(i==index?"block":"none");
}
</script>
</head>
<body>
<select onchange='showform(this.selectedIndex);'>
<option>form1</option>
<option>form2</option>
</select>
<form method="post" action="url1">
<input type="hidden" name="donate" value="food"/>
<input type="hidden" name="days" value="30"/>
<input type="text" name="cans" value="5"/>
<input type="text" name="full_name" value=""/>
<input type="text" name="email" value=""/>
<input type="submit" name="submit" value="join1"/>
</form>
<form id='form2' style='display:none' method="post" action="url2">
<input type="hidden" name="donate" value="shoes"/>
<input type="text" name="pairs" value="2"/>
<input type="text" name="style" value=""/>
<input type="text" name="full_name" value=""/>
<input type="text" name="email" value=""/>
<input type="submit" name="submit" value="join2"/>
</form>
</body></html>
If you don't like javascript, you would need to do that in php by using an additional form for the select-element and insert only the wanted form (or hide the others).
I already see some design issues with the way you have planned your multi-form setup, there are much better techniques to handle this - but I will try to help you using your own technique.
By using your own example, this should work for you:
<form id="join1" method="post" action="url1">
<input type="hidden" name="donate" value="food">
<input type="hidden" name="days" value="30">
<input type="text" name="cans" value="5">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
</form>
<form id="join2" method="post" action="url1">
<input type="hidden" name="donate" value="shoes">
<input type="text" name="pairs" value="">
<input type="text" name="style" value="">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
</form>
<select id="formList">
<option value="">Select form..</option>
<option value="join1">Join1</option>
<option value="join2">Join2</option>
</select>
<button id="submitBtn">Submit</button>
And this is the javascript for making it happen (using jQuery):
$('#submitBtn').on('click',function(){
var selectedForm = $('#formList').val();
if(selectedForm){
$('#'+ selectedForm).submit();
}
});
the example is also available as a jsfiddle:
https://jsfiddle.net/k1jf4b4L/
Hope it helps a bit