Problems with the ACGIP Conference Project: Script and Element Forms - html

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/>

Related

Jquery serializeArray not getting all fields

I have this HTML:
<div id="broker_referral_block" style="display: none;">
<label for="">* How did your broker/agent introduce you to the project?</label><br>
<input type="radio" name="referral2" value="Site Visit" class="referral2"> Site Visit
<br>
<input type="radio" name="referral2" value="Conversation through social media" class="referral2"> Conversation through social media
<br>
<input type="radio" name="referral2" value="Referrals" class="referral2"> Referrals
<br>
<input type="radio" name="referral2" value="Phone Calls" class="referral2"> Phone Calls
<br>
<input type="radio" name="referral2" value="Developer" class="referral2"> Developer
<br>
<input type="radio" name="referral2" value="Other" class="referral2"> Other
</div>
I don't know why it's not included when I try to serializeArray var test = jQuery(this).serializeArray(); I don't see anything wrong. I know the display:none; is not an issue because this field:
<div id="broker_referral_block_other_field" style="display: none;">
<input type="text" class="form-control referral2other" name="referral2other" id="referral2other">
</div>
Gets read, just without value (which is what I want). I also don't understand why everything in this block gets read:
<div id="existing_loans_block" style="display: none;">
<label for="">* Loan</label>
<input type="text" class="form-control existing_loans_detail" name="loan" id="loan">
<label for="">* Amount</label>
<input type="text" class="form-control existing_loans_detail" name="loan_amount" id="loan_amount">
<label for="">* Monthly Amoritization</label>
<input type="text" class="form-control existing_loans_detail" name="loan_amort" id="loan_amort">
<label for="">* Term</label>
<input type="text" class="form-control existing_loans_detail" name="loan_term" id="loan_term">
<label for="">* Status</label>
<!-- This bit does not get included too -->
<select name="loan_status" id="loan_status" class="form-control existing_loans_detail">
<option value="" selected disabled hidden>Select loan status...</option>
<option value="Active">Active</option>
<option value="Updated">Updated</option>
</select>
</div>
Except for loan_status. All of them are properly wrapped in a form tag. This is my jquery:
jQuery("#hbcq_form").submit(function(e){
e.preventDefault();
var test = jQuery(this).serializeArray();
...
I did a console.log(test) and that's when I found out that referral2 and loan_status is not being included in the serialization. I also double checked, there is no name conflicts for these.
jQuery serialize hidden (display:none) form elemens does not work. Workaround?
check this out you can find help full answer

Problems with the ACGIP Conference Project

So I have already attempted to do this project by myself but the program I'm using as a sandbox seems incredibly picky at how one is to do it. Despite using examples and other aids to help get this done, nothing has worked. I'm having three separate issues that I think I have done correctly but, apparently, had not done correctly. The issues are as followed:
Script & Form Elements
The Regex
The Submit Button
The program will not tell me what's being done wrong either. Might I get some aid?
<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>
The code for the regex is wrong here.
it should be:
<input type="text" name="phoneNumber" id="phoneBox" placeholder="(nnn) nnn-nnnn" pattern="^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$" required />
NOT
<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">
It gives an error every time. Cheers

Is it possible to make a contact form in html?

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>

How to reset multiple forms at once with one button

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.

Form Alignment CSS

This is one thing that I really hate within development is forms. Below is my code and what I am trying to do is align the inputs with the labels Name: input. Is there a rule that you use to help remember when coding forms?
CSS:
#newwebsiteForm form{
padding:10px;
margin:10px 0;
width:480px;
position: relative;
}
#newwebsiteForm label{
width:240px;
display:block;
float:right;
}
#newwebsiteForm input{
width:240px;
display:block;
float:left;
}
HTML:
<section id="content">
<h1>Free Quote</h1>
<p>Please fill out the below questionnaire to receive your free web development quote</p>
<form action="" method="post" accept-charset="utf-8">
<select name="requiredOption" id="requiredOption">
<option id="pleaseselect" value="pleaseselect">Please Select Your Required Quote</option>
<option id="newwebsite" value="newwebsite">New Website</option>
<option id="websiteredevelopment" value="websiteredevelopment">Website Redevelopment</option>
<option id="other" value="other">Other</option>
</select>
</form>
<div id="newwebsiteSection">
<form action="" id="newwebsiteForm" method="get" accept-charset="utf-8">
<fieldset>
<label>Do You Require Hosting?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>
<label>Do You Require A Domain?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>
<label>Do You Have A Logo?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>
<label>What is your Domain?</label>
<input type="url" name="domain" value="http://example.com"></input></div>
<label>Type of site Required?<label>
<select name="newwebsiteType" id="newwebsiteType">
<option value="shoppingCart">Shopping Cart</option>
<option value="CMS">Content Management System</option>
<option value="static">Static Website</option>
<option value="otherDevelopment">Other Development</option>
</select>
<label>Do You Require A Design?</label>
<input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>
<label>Three Favorite colors?</label>
<input name="color1" value=""></input>
<input name="color2" value=""></input>
<input name="color3" value=""></input>
<label>What are your favorite websites?</label>
<input type="text" name="fav1" value=""></input>
<input type="text" name="fav2" value=""></input>
<input type="text" name="fav3" value=""></input>
<label>Comments?</label>
<textarea name="comments" id="comments"></textarea>
<input type="submit" name="submit" value="Send Quote Request">
</form>
</div>
<div id="websiteredevelopmentSection">
<p>Website Redevelopment</p>
</div>
<div id="otherSection">
<p>Other</p>
</div>
</section>
Just because tables are the easier option doesn't make using them right.
Here's a great article about css form design.
http://www.alistapart.com/articles/prettyaccessibleforms
The author suggests storing each label/input element in an ordered list element keeping them grouped.
I've just used this to implement a bunch of forms for various mini sites and it worked a treat!
You can align the label next to the input or above just by changing the ol li label element's display property from display:inline-block to display:block respectively.
Getting the text to align next to a radio button or checkbox can be a bit tricky but is possible by adding and styling a span element.
BEST OF ALL IT'S CROSS BROWSER COMPATIBLE!
Hope that helps.
This is probably related to the question: <div> usage correctly? Can't get the columns to line up: You can also check my comments there for some reference when dealing with semantically-correct forms.
The approach you will need to be in habit of is always structure your markup correctly first before jumping to any CSS (or styling).
A <form> is composed of the following:
The <form> itself.
The <fieldset>: acts a the container of the different sections of your <form>
The <legend>: acts as the heading of the <fieldset>
The <input />: for fields, checkboxes, radio buttons, and submit button
The <button>: an alternative for <input type="submit">, which can wrap something
inside of it.
The <select>: a list of values inside a drop-down menu.
The <label>: from the name itself, the label of the <input />, <button> and <select>
To illustrate, you can check this example:
<form>
<fieldset>
<legend>Form Heading: </legend>
<fieldset>
<legend>Group 1 Heading: </legend>
<label for="input-id">Input Label: </label>
<input id="input-id" />
</fieldset>
<fieldset>
<legend>Group 2 Heading: </legend>
<label for="select-id">Select Label: </label>
<select id="select-id">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</fieldset>
<input type="submit" value="Submit" />
</fieldset>
</form>
With the exception of radio (<input type="radio" />) and checkboxes (<input type="checkbox" />), where the <label> should come after the <input />
You have to use the label element as follows to correctly align them:
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
I wrap each input/label pair in a <div>. This helps a lot with styling.
<div class="form-item">
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name" />
</div>