4 of 7
This lesson is closed. Finish the one before it. Do the practice. Pass the assessment. Then this one opens.
Back to the lesson. Three tries are used. Read this again, then try the code.
You finished. The lesson is open again.
First name, middle name, surname. Gender as checkboxes. Date of birth as a calendar. State of origin, South East states only. Qualification as radios: ND/NCE, HND/B.Sc., MBA/M.Sc., PhD. A browse button for a passport. A description. Cancel and Submit.
The clay outline is the part this lesson is about.
A form is a list of questions. Each question is a label with a control inside it. A control is the thing the person uses: a bar, a tick, a calendar, a list, a file button. The paper tells you which kind to use. Follow it. Three separate bars for the names, not one bar for a full name.
Gender is a checkbox, because the paper says checkbox. A checkbox can be ticked along with another one. Qualification is a radio. Radios are one question: give every radio the same name, name="qualification", and only one can stay chosen. The options are ND/NCE, HND/B.Sc., MBA/M.Sc., and PhD. Not a shorter list, and not different letters.
State of origin is a select, a closed list. The paper says South East states only: Abia, Anambra, Ebonyi, Enugu, Imo. A normal text bar would let someone type Kano. Date of birth is type="date", which is the calendar. You do not draw a calendar, and you do not need a placeholder. Passport is type="file". The browser draws the browse button. Placeholder does nothing on a file control. Cancel is type="reset", which empties the form. Submit is type="submit".
<form action="#form" id="form">
<label>First name <input type="text" name="firstname"></label>
<label>Middle name <input type="text" name="middlename"></label>
<label>Surname <input type="text" name="surname"></label>
<fieldset>
<legend>Gender</legend>
<label><input type="checkbox" name="gender" value="male"> Male</label>
<label><input type="checkbox" name="gender" value="female"> Female</label>
</fieldset>
<label>Date of birth <input type="date" name="dob"></label>
<label>State of origin
<select name="state">
<option value="">South East states</option>
<option>Abia</option>
<option>Anambra</option>
<option>Ebonyi</option>
<option>Enugu</option>
<option>Imo</option>
</select>
</label>
<fieldset>
<legend>Qualification</legend>
<label><input type="radio" name="qualification" value="nd-nce"> ND/NCE</label>
<label><input type="radio" name="qualification" value="hnd-bsc"> HND/B.Sc.</label>
<label><input type="radio" name="qualification" value="mba-msc"> MBA/M.Sc.</label>
<label><input type="radio" name="qualification" value="phd"> PhD</label>
</fieldset>
<label>Passport <input type="file" name="passport" accept="image/*"></label>
<label>Description
<textarea name="description" rows="5"></textarea>
</label>
<button type="reset">Cancel</button>
<button type="submit">Submit</button>
</form><label>First name <input type="text"></label>The word and the bar are one label. Middle name and surname are the same pattern, with their own name="".type="checkbox"Gender. The paper asked for checkboxes. The word Male sits inside the label, after the box, so tapping the word ticks it.type="date"The calendar. The phone or the computer opens a date picker. Leave off placeholder.<select>A closed list. Five options: Abia, Anambra, Ebonyi, Enugu, Imo. A person cannot type a sixth state.type="radio" name="qualification"The same name on all four radios makes them one question. The four values match the paper, including PhD.<fieldset> and <legend>A fieldset is a box around one question. The legend is that question’s heading: Gender, or Qualification.type="file"The browse button. The browser writes “Choose file” itself. accept="image/*" means pictures only. It is a helper, not a separate mark.<textarea>The description. A textarea is a bar with room for several lines. rows="5" sets the height.type="reset" and type="submit"Cancel empties the form. Submit sends it. The words on the buttons are Cancel and Submit. They sit under the questions.This is not your file, and it is not the version to copy. It is here so you can see the difference after the right labels.
Male <input type="checkbox"> Female <input type="checkbox">
<input type="text" placeholder="State of Origin">
ND/NCE <input type="radio"> HND/B.Sc. <input type="radio">
<input type="file" placeholder="Upload Passport">A friend left the words outside the labels, used a text bar for the state, and gave the radios no shared name, so they are not one question. The file control has a placeholder, which the browser ignores. The paper’s qualification list also includes MBA/M.Sc. and PhD. Use the form above, not this one.
The next lesson opens after you practice and pass the assessment.
The radios are not one question, the file bar has a placeholder that does nothing, and PhD is missing. Fix this piece.
The code is right. Start the assessment when you are ready. The lesson stays closed until both answers are right.
The lesson is closed. Pick one answer each, then mark it. A wrong answer tells you why, what to do, and what to remember.