Question: Hi, I have the following problem with HTML and CSS. I have the following HTML code set up: < form action= thankyou.html method= get >

Hi, I have the following problem with HTML and CSS. I have the following HTML code set up:

<form action="thankyou.html" method="get"> <div id="regDetails"> <fieldset> <legend> Registration details: legend> <label> Title: <select name="title"> <option value="mr.">Mr.option> <option value="ms.">Ms.option> <option value="mrs.">Mrs.option> select> label> <br/> <label> First Name: <input type="text" name="fname" size="9" maxlength="100" pattern="[a-zA-Z0-9]+" placeholder="First Name"  required title="First Name"> label> <br/> <label> Last Name: <input type="text" name="lname" size="9" maxlength="100" pattern="[a-zA-Z0-9-]+" placeholder="Last Name"  required title="Last Name"> label> <br/> <label> Address 1: <input type="text" name="add1" size="15" maxlength="100" pattern="[a-zA-Z0-9\ \#]+" placeholder="Address 1"  required title="Address 1"> label> <br/> <label> Address2: <input type="text" name="add2" size="15" maxlength="100" pattern="[a-zA-Z0-9\ \#]+" placeholder="Address 2"  title="Address 2"> label> <br/> <label> City: <input type="text" name="city" size="15" maxlength="50" pattern="[a-zA-Z\ ]+" placeholder="City" required  title="City"> label> <br/> <label> State: <select name="state" required title="state"> <option value="AL">Alabamaoption> <option value="AK">Alaskaoption> <option value="AZ">Arizonaoption> <option value="AR">Arkansasoption> <option value="CA">Californiaoption> <option value="CO">Coloradooption> <option value="CT">Connecticutoption> <option value="DE">Delawareoption> <option value="DC">District Of Columbiaoption> <option value="FL">Floridaoption> <option value="GA">Georgiaoption> <option value="HI">Hawaiioption> <option value="ID">Idahooption> <option value="IL">Illinoisoption> <option value="IN">Indianaoption> <option value="IA">Iowaoption> <option value="KS">Kansasoption> <option value="KY">Kentuckyoption> <option value="LA">Louisianaoption> <option value="ME">Maineoption> <option value="MD">Marylandoption> <option value="MA">Massachusettsoption> <option value="MI">Michiganoption> <option value="MN">Minnesotaoption> <option value="MS">Mississippioption> <option value="MO">Missourioption> <option value="MT">Montanaoption> <option value="NE">Nebraskaoption> <option value="NV">Nevadaoption> <option value="NH">New Hampshireoption> <option value="NJ">New Jerseyoption> <option value="NM">New Mexicooption> <option value="NY">New Yorkoption> <option value="NC">North Carolinaoption> <option value="ND">North Dakotaoption> <option value="OH">Ohiooption> <option value="OK">Oklahomaoption> <option value="OR">Oregonoption> <option value="PA">Pennsylvaniaoption> <option value="RI">Rhode Islandoption> <option value="SC">South Carolinaoption> <option value="SD">South Dakotaoption> <option value="TN">Tennesseeoption> <option value="TX">Texasoption> <option value="UT">Utahoption> <option value="VT">Vermontoption> <option value="VA">Virginiaoption> <option value="WA">Washingtonoption> <option value="WV">West Virginiaoption> <option value="WI">Wisconsinoption> <option value="WY">Wyomingoption> select> label> <br/> <label> Zip Code: <input type="text" name="zipcode" size="5" placeholder="Zip Code" pattern="[0-9]{5}\-[0-9]{4}" required  title="zip"> label> <br/> <label> Telephone: <input type="text" name="telephone" size="12" maxlength="12" placeholder="Phone Number"  pattern="\d{3}[\-]\d{3}[\-]\d{4}" required title="Phone Number"> label> <br/> <label> Email address: <input type="text" name="email" size="15" placeholder="Email"  pattern="([A-Za-z0-9_\ \.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})" required title="Email Address"> label> fieldset> div> <div id="companyInfo"> <fieldset> <label> Company Website: <input type="text" name="compweb" size="15" placeholder="Company Website" title="Company Website"> label> <br/> <label> Position with Company: <input type="text" name="poscomp" size="15" placeholder="Pos. w/comp." pattern="z]{2,4})" required  title="Position With Company"> label> <br/> <label> Name of Company: <input type="text" name="nameofcomp" size="15" placeholder="Name of Company" pattern="[a-zA-Z0-9\ \#]+"  required title="Name of Company"> label> fieldset> div> <div id="mealPlan"> <fieldset> <legend> Meal Plan: legend> <label> Would you like to purchase the Meal Plan?: <input type="radio" name="mpo" value="yes" required title="yes"> yes label> <label> <input type="radio" name="mpo" value="no" required title="no"> no label> <br/> <label> Would you like to purchase just the Day 2 Dinner?: <input type="radio" name="d2mpo" value="yes" required title="yes"> yes label> <label> <input type="radio" name="d2mpo" value="no" required title="no"> no label> fieldset> div> <div id="workshopInfo"> <fieldset> <legend> Workshops: legend> <label> Session1:<br/> <input type="radio" name="session1" value="Aperture" checked title="Aperture"> Aperture label> <br/> <label> <input type="radio" name="session1" value="shutterspeed" title="Shutter Speed"> Shutter Speed label> <br/> <label> <input type="radio" name="session1" value="ISO" title="ISO"> ISO label> <br/> <legend> Session 2: legend> <label> Workshops:<br/> <input type="radio" name="session2" value="naturallight" checked title="Natural Light"> Natural Light label> <br/> <label> <input type="radio" name="session2" value="studiolight" title="Studio Light"> Studio Light label> <br/> <label> <input type="radio" name="session2" value="posing" title="Posing"> Posing label> <br/> <legend> Session 3: legend> <label> Workshops:<br/> <input type="radio" name="session3" value="tools" checked title="Tools"> Tools label> <br/> <label> <input type="radio" name="session3" value="timeofday" title="Time of Day"> Time of day label> <br/> <label> <input type="radio" name="session3" value="settings" title="Settings"> Settings label> fieldset> div> <div id="billingInfo"> <fieldset> <legend> Billing Info: legend> <label> Billing First Name: <input type="text" name="bfname" size="9" maxlength="100" placeholder="First Name" pattern="[a-zA-Z]+"  required title="Billing First Name"> label> <br/> <label> Billing Last Name: <input type="text" name="blname" size="9" maxlength="100" placeholder="Last Name" pattern="[a-zA-Z]+"  required title="Billing Last Name"> label> <br/> <label> Card Type: <input type="radio" name="cctype" value="visa" required title="Visa"> Visa label> <label> <input type="radio" name="cctype" value="mastercard" required title="Mastercard"> Mastercard label> <label> <input type="radio" name="cctype" value="americanexpress" required title="American Express"> American Express label> <br/> <label> Credit Card Number: <input type="text" name="ccnum" size="16" maxlength="16" placeholder="CC#" pattern="[0-9]{16}" required  title="Credit Card Number"> label> <br/> <label> CSV: <input type="text" name="csv" size="5" maxlength="4" placeholder="CSV#" pattern="[0-9]{4}" required  title="CSV Number"> label> <br/> <label> Expiration Date Year: <input type="text" name="exdyear" size="4" maxlength="4" placeholder="yyyy" pattern="[2][0]([1-2][6-9])"  required title="Expiration Date Year"> label> <label> Expiration Date Month: <input type="text" name="exdmonth" size="2" maxlength="2" placeholder="mm" pattern="(0[1-9]|1[0-2])"  required title="Expiration Date Month"> label> fieldset> div> <div id="submitButton"> <fieldset> <legend> Submit: legend> <input type="submit" value="submit" title="Submit"/> fieldset> div> form> 

I need help implementing CSS so that as a user enters into a field in a specific section, the background color of the section changes and the field label becomes bold. Any help would be appreciated--I am stuck.

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!