Preformatted texthi. did the lab project for the free code camp survey form. did get it to work. and fixed my drop down lists. but now wondering if my radio group is correct. also why is there a second edit or slider field for the age. will paste my code. just want to tidy it up for my local copy on my laptop using vs code. and using jaws for windows screen reader. any ideas how to improve this.
marvin.
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>free Code Camp Survey Form</title>
</head>
<body>
<header>
<h1 ID="title">free Code Camp Survey Form</h1>
<p ID="description">Thank you for taking the time to help us improve our platform.</p>
</header>
<main>
<form id="survey-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<label for="age">Age (optional)</label>
<input type="number" id="number" name="age" min="3" max="100" placeholder="Enter your age".>
<label id="name-label">
<label id="email-label">
<label id="age-label">
<label id="number-label">Age (optional):</label>
<br />
<label for="dropdown">Which option describes your current role?</label>
<select name="dropdown" id="dropdown">
<select id="dropdown">
<option value="dropdown">Student</option>
<option value="dropdown">Full Time Job</option>
<option value="dropdown">Full Time Learner</option>
<option value="dropdown">Prefer not to say</option>
<option required value="dropdown">Other</option>
</select>
</select>
<p>Would you recommend freeCodeCamp to a friend?</p>
<label for="definitely">Definitely</label>
<input type="checkbox" id="definitely" name="definitely" value="definitely">
<label for="maybe">Maybe</label>
<input type="checkbox" id="maybe" name="maybe" value="maybe">
<label for="sure">Not sure</label>
<input type="checkbox" id="sure" name="sure" value="sure">
<label for="dropdown">What improvements would you like to see on freeCodeCamp?</label>
<select name="dropdown" id="dropdown">
<select id="dropdown">
<option value="dropdown">Challenges</option>
<option value="dropdown">Projects</option>
<option required value="dropdown">Community</option>
<option value="dropdown">Open Source</option>
</select>
</select>
<p>What would you like to see improved? (Check that all apply)</p>
<group name="choice">
<label for="frontend">Front-end Projects</label>
<input type="radio" id="choice" name="choice" value="choice">
<label for="backend">Back-end Project</label>
<input type="radio" id="choice" name="choice" value="choice">
<label for="data">Data Visualization</label>
<input type="radio" id="choice" name="choice" value="choice">
<label for="challenges">Challenges</label>
<input type="radio" id="choice" name="choice" value="choice">
<label for="open">Open Source Community</label>
<input type="radio" id="choice" name="choice" value="choice">
<label for="help">Gitter Help Rooms</label>
<input type="radio" id="choice" name="choice" value="choice">
<label for="video">Videos</label>
<input type="radio" id="choice" name="choice" value="choice">
<label for="city">City Meetups</label>
<input type="radio" id="choice" name="choice" value="choice">
<label for="wiki">Wiki</label>
<input type="radio" id="choice" name="choice" value="choice">
<label for="forum">Forum</label>
<input type="radio" id="choice" name="choice" value="choice">
<label for="courses">Additional Courses</label>
<input type="radio" id="choice" name="choice" value="choice">
</group>
<textarea>
Enter your comment here...
</textarea>
<button id="submit">Submit</button>
</form>
</main>
</body>
</html>
I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
you also have two select elements one inside the other
your radio group has some issues, you can’t give the same id and value to all elements
also I would recommend putting it inside a fieldset and using a legend to give it a description instead of a p element
hi, sorry my screen reader jaws was having issues with the preformatted code, tried copying and pasting, deleting. sorry. will try my best. and use control e for the preformatted text before typing or pasting any code.
sorry.
marvin.
hi. thanks for the feedback. was using the example project for a base. okay will pick this up tomorrow. and fix. okay do a field set and legend. maybe have to go back to the project and look at the list of requirements.
thanks.
hi. okay made a lot of modifications to my local copy. now took out the radio buttons. and using the sample example. now a couple of questions, got text next to the first combo box. how to get it not to speak next to what would you to see on free code camp. also in the combo box, how to get the text Select an option or do i need that as a placeholder text. so any ideas. so got it working 99%. so now how to do that.and so got the check boxes, edit fields, combo boxes. so any ideas. how not jaws to ghen say the extra text after the combo box to then have on a separate line. so pasting my code below. any help or ideas or suggestions. did try googling, but could not seem to find an answer to this one.
marvin.
ps: pasting the code and got preformatted code on. control e works in the editor for chrome.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>free Code Camp Survey Form</title>
</head>
<body>
<header>
<h1 ID="title">free Code Camp Survey Form</h1>
<p ID="description">Thank you for taking the time to help us improve our platform.</p>
</header>
<main>
<form id="survey-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<label for="age">Age (optional)</label>
<input type="number" id="number" name="age" min="3" max="100" placeholder="Enter your age".>
<br />
<label for="dropdown">Which option describes your current role?</label>
<select name="dropdown" id="dropdown">
<select id="dropdown">
<option value="dropdown">Student</option>
<option value="dropdown">Full Time Job</option>
<option value="dropdown">Full Time Learner</option>
<option value="dropdown">Prefer not to say</option>
<option required value="dropdown">Other</option>
</select>
</select>
<p>Would you recommend freeCodeCamp to a friend?</p>
<label for="definitely">Definitely</label>
<input checked type="checkbox" id="definitely" name="definitely" value="definitely">
<label for="maybe">Maybe</label>
<input type="checkbox" id="maybe" name="maybe" value="maybe">
<label for="sure">Not sure</label>
<input type="checkbox" id="sure" name="sure" value="sure">
<label for="dropdown">What improvements would you like to see on freeCodeCamp?</label>
<select name="dropdown" id="dropdown">
<select id="dropdown">
<option value="dropdown">Challenges</option>
<option value="dropdown">Projects</option>
<option required value="dropdown">Community</option>
<option value="dropdown">Open Source</option>
</select>
</select>
<br />
<p>What would you like to see improved? (Check that all apply)</p>
<label for="frontend">Front-end Projects</label>
<input checked type="checkbox" id="frontend" name="frontend" value="frontend">
<label for="backend">Back-end Project</label>
<input type="checkbox" id="backend" name="backend" value="backend">
<label for="data">Data Visualization</label>
<input type="checkbox" id="data" name="data" value="data">
<label for="challenges">Challenges</label>
<input type="checkbox" id="challenges" name="challenges" value="challenges">
<label for="open">Open Source Community</label>
<input type="checkbox" id="open" name="open" value="open">
<label for="help">Gitter Help Rooms</label>
<input type="checkbox" id="help" name="help" value="help">
<label for="video">Videos</label>
<input type="checkbox" id="video" name="video" value="video">
<label for="city">City Meetups</label>
<input type="checkbox" id="city" name="city" value="city">
<label for="wiki">Wiki</label>
<input type="checkbox" id="wiki" name="wiki" value="wiki">
<label for="forum">Forum</label>
<input type="checkbox" id="forum" name="forum" value="forum">
<label for="courses">Additional Courses</label>
<input type="checkbox" id="courses" name="courses" value="courses">
<label for="comments">Any comments or suggestions?</label>
<textarea>
Enter your comment here...
</textarea>
<button id="submit">Submit</button>
</form>
</main>
</body>
</html>
,
hi, can you explain. thought i had the combo box group dropdown. if not, then please explain. so dont have a radio group. have edit boxes, combo drop down boxes, check boxes, a text area. so please explain. are you saying i need to have the dropdown items the same and not the same text. please explain. i am not sure what you are saying or refeering. can you explain. got everything else working, except the combo boxes.
marvin..
hi, okay will fix the checkboxes and how to fix my dropdown. need help with that. thats the main issue. and will have all my checkboxes with the same value, id and name.
can you point me how to get the dropdown boxes, and from the example project. no legends or fieldset. so then the nested combo boxes, how to get this to work.
marvin.
hi. okay . yes all the same group, will fix that tomorrow. so how to fix my drop down issue. and not have it speak out the text next to it. the paragraph.
how to fix.
marvin.
hi. okay if i group all the checkboxes, then they dont display properly. so just did that. and all the checkboxes work fine. now just the drop down list issue. help with that to work. so got it 99% working. and using jaws for windows screen reader. and using firefox as my main browser. marvin.
ps: pasting below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>free Code Camp Survey Form</title>
</head>
<body>
<header>
<h1 ID="title">free Code Camp Survey Form</h1>
<p ID="description">Thank you for taking the time to help us improve our platform.</p>
</header>
<main>
<form id="survey-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<label for="age">Age (optional)</label>
<input type="number" id="number" name="age" min="3" max="100" placeholder="Enter your age".>
<br />
<label for="dropdown">Which option describes your current role?</label>
<select name="dropdown" id="dropdown">
<select id="dropdown">
<option value="dropdown">Student</option>
<option value="dropdown">Full Time Job</option>
<option value="dropdown">Full Time Learner</option>
<option value="dropdown">Prefer not to say</option>
<option required value="dropdown">Other</option>
</select>
</select>
<p>Would you recommend freeCodeCamp to a friend?</p>
<label for="definitely">Definitely</label>
<input checked type="checkbox" id="definitely" name="definitely" value="definitely">
<label for="maybe">Maybe</label>
<input type="checkbox" id="maybe" name="maybe" value="maybe">
<label for="sure">Not sure</label>
<input type="checkbox" id="sure" name="sure" value="sure">
<br />
<label for="dropdown">What improvements would you like to see on freeCodeCamp?</label>
<select name="dropdown" id="dropdown">
<select id="dropdown">
<option value="dropdown">Challenges</option>
<option value="dropdown">Projects</option>
<option required value="dropdown">Community</option>
<option value="dropdown">Open Source</option>
</select>
</select>
<br />
<label for="choice">What would you like to see improved? (Check that all apply)</label>
<label for="frontend">Front-end Projects</label>
<input checked type="checkbox" id="frontend" name="frontend" value="frontend">
<label for="backend">Back-end Project</label>
<input type="checkbox" id="backend" name="backend" value="backend">
<label for="data">Data Visualization</label>
<input type="checkbox" id="data" name="data" value="data">
<label for="challenges">Challenges</label>
<input type="checkbox" id="challenges" name="challenges" value="challenges">
<label for="open">Open Source Community</label>
<input type="checkbox" id="open" name="open" value="open">
<label for="help">Gitter Help Rooms</label>
<input type="checkbox" id="help" name="help" value="options">
<label for="video">Videos</label>
<input type="checkbox" id="video" name="video" value="video">
<label for="city">City Meetups</label>
<input type="checkbox" id="city" name="city" value="city">
<label for="wiki">Wiki</label>
<input type="checkbox" id="wiki" name="wiki" value="wiki">
<label for="forum">Forum</label>
<input type="checkbox" id="forum" name="forum" value="forum">
<label for="courses">Additional Courses</label>
<input type="checkbox" id="courses" name="courses" value="courses">
<label for="comments">Any comments or suggestions?</label>
<textarea>
Enter your comment here...
</textarea>
<button id="submit">Submit</button>
</form>
</main>
</body>
</html>
hi. if some one can help with my drop down . this is the only thing not working.how to get it to work and then show the correct values. and also have the text select something inside the top of the drop down list.
marvin.
hi. well changed my radio buttons to check boxes, and got the combo box issue fixed. so this form is put to bed and can move on. so this is fixed i think. any comments. or if this is solved, then will say it is solved. pasting the code below.
marvin.
ps: i would like to thank you for your help and putting up with me.
trying my best.
marvin.
