This challenge is the first one to delve into form controls, including text boxes, check boxes, radio buttons, and drop down lists. When building a web site this is a commonly used way to collect data from someone who views your site.
Submission
You should submit the HTML that would output the pictures that appear below. See here for an example of the format you should use when submitting.
The Challenge
There are couple of tricks to this challenge; it focuses on HTML tags that some of you might not have seen before. Be sure to check the resources! As usual, you will be creating HTML that matches the pictures as closely as possible.
Firefox 3:
Safari 3.1.2 (on Windows):
Internet Explorer 7:
Your solution must produce the same output as these browsers have.
In addition, your solution must be valid XHTML 1.0 Transitional. If you're not sure what this means, you should look at this thread of conversation:
You can validate your HTML document here: W3C Validator. Try it by copying my Challenge 1 Solution and pasting it in the text area here. You should see that the page is valid XHTML 1.0 Transitional. Note that if your solution is "tentatively valid" according to that site, then you will not lose points.
There are also a couple of restrictions on the tags you can use. You will lose points if you use any of the following:
<font>
<br> (or <br />)
<div>
<ul>
<b> or <strong>
Specifications
There are few other things you need to throw in that are not represented in the pictures:
The maximum length of the first name text box is 25.
The maximum length of the last name text box is 50.
The option values in the first drop down list are
Friend
Online Ad
Search Engine
The comments text area has 15 rows and 30 columns.
The "Yes, send email notifications" checkbox, as well as the "Group 1a" and "Group 2b" radio buttons should be checked by default.
You should be able to check only one of the "Group 1a" and "Group 1b" radio buttons at a time.
You should be able to check only one of the "Group 2a", "Group 2b", and "Group 2c" radio buttons at a time.
You do not have to make the form actually work. You also do not need to use a form HTML element if you don't want to.
Select (Pay close attention to the attributes here. )
Text
Available for you to copy and paste into your solution if you don't want to type it yourself.
code
Registration Form
Here you can register for the best sample site on the net!
Name Field Description
First Name This is your first name.
Last Name This is your last name.
Date of Birth The day on which you were born.
How did you hear about us? Self-explanatory.
What are you interested in? Self-explanatory.
Comments
Notifications
Yes, send email notifications.
Yes, send phone notifications.
Whether you want notifications.
Some Buttons
Group 1a Group 1b
Group 2a Group 2b Group 2c
Schedule
July 4 – July 19, 12:00PM MST (GMT -7): Post your solutions
July 20 – June 27: Judging/discussion of solutions.
Rules
You may not use any CSS or JavaScript to implement your solution.
When you post your solution, report it and take it out of view.
Judging Criteria
HTML Only i.e. No CSS or JavaScript (2 points possible)
How closely your solution matches the picture (5 points possible)
How closely your solution matches the textual specifications (in the Specifications section) (5 points possible)
You can use this thread for any questions you have, and I strongly encourage you to ask questions if you think something is vague, or you don't quite understand how to validate your HTML. I'll judge your submissions about two weeks from now. For the week afterwards, we can talk about the solutions and the difficulty of the next challenge.
[size=1][color=#666666]This message was edited by Artificer on Jul 04 2008.
Thread Recap (last 10 posts from newest to oldest)
Aug 25, 08 at 8:31am
Chekkaa
From what I know, he isn't making another one at the moment.
Aug 25, 08 at 8:18am
Blackfalcon
I'm sorry I missed this challenge. I was on holidays. =(
When's the next one, then?
Jul 26, 08 at 8:23pm
Chiggins
No matter how many times I read stuff over I always get spelling mistakes.
Jul 26, 08 at 3:25pm
Artificer
In real circumstances, yes, you would probably use a form, but that element somewhat blurs the line between HTML and server-side languages like PHP, ASP, etc. But...
Looks good. I would advise you not to put explicit widths and heights on table cells and instead let them lay themselves out as necessary. See my solution for an example of how to do this. Also, the form tag is used for a logical form you are filling out. Since there is effectively one form on this page, there would only be one form tag.
Any way did I score 20 if it only matched in Firefox? There were lots of random line breaks and such with Safari and IE. And what causes that anyway?
Having a form for (almost) every input element caused it. =P
Looks good. I would advise you not to put explicit widths and heights on table cells and instead let them lay themselves out as necessary. See my solution for an example of how to do this. Also, the form tag is used for a logical form you are filling out. Since there is effectively one form on this page, there would only be one form tag.
I put the widths because I wanted it to match as closely as possible. And I used multiple form tags because I figured it would work like definition lists, where it's improper XHTML to put anything else inside of them aside from list items.
Any way did I score 20 if it only matched in Firefox? There were lots of random line breaks and such with Safari and IE. And what causes that anyway?
Powered by neoforums v1.6.5b (aperture) Copyright Neo Era Media, Inc. 1999-2013
