Homework SourseHTML5 CSS3 1Create a fieldset called Contact Information to
HTML5 CSS3
1-Create a fieldset called Contact Information to encompass the following values:
-An input for first name named Fname
-An input for last name named Lname
-An input for email named emailAddie
-An input for address named mailAddie
-An input for city named City
-An input for State named State
-An input for Zip named Zip
-An input for telephone number named phoneNum
2-These values should use input types appropriate to the type of data they are (such as using tel for the telephone number)
3-Create a second fieldset for order information.
4-This fieldset needs to encompass the following values
a) An input for the number of samoflanges named numSamoflange
i) This needs to accept a range of values from 0 to 100
b) An input for whether they can be contacted named contactMe.
i) This input needs to allow for the selection of a single value of the following:
1. \"by Email”
2. “by Phone”
3. “by Email or Phone”
4. “no”
ii) This can be done through a menu or a radio button
iii) The value listed is the one that has to be assigned to value, what the user visibly selects can be different.
5) Go edit each fieldset to have a legend that is sensible for what is being collected
6) Ensure that every input has a label associated with it that has a name that is sensible for the data to be entered
a)Fieldsets and legends are important for accessibility so they need to make sense for individuals who might be using a screen reader or other forms of assistive technologies.
7) Create a button to submit the form
8) Create a button to reset the form
Solution
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<legend>Contact Information:</legend>
FNAME: <input type=\"text\"><br>
LNAME: <input type=\"text\"><br>
EMAILINFO: <input type=\"email\"><br>
MAILADDRESS: <input type=\"text\"><br>
CITY: <input type=\"text\"><br>
STATE: <input type=\"text\"><br>
ZIP: <input type=\"number\"><br>
PHONENUMBER: <input type=\"tel\"><br>
</fieldset>
<fieldset>
<legend>order information:</legend>
numSamoflange: <input type=\"text\"><br>
contactMe:<br>
<input type=\"radio\"> PHONE<br>
<input type=\"radio\"> EMAIL <br>
<input type=\"radio\"> by Email or Phone<br>
<input type=\"radio\"> NO<br>
</fieldset>
<input type=\"submit\" value=\"Submit\">
<input type=\"reset\" value=\"Reset\">
</form>
</body>
</html>
