Week 09

Week 9 is about forms. These are nowadays one of the most important uses of internet, and today, we learnt   how to design a simple one with the <form> tag, as well as some others, for example:
<fieldset> ; which will create a field set.
<legend> ; inside of the fieldset we need a tittle
<label> ; and then we need a label which is what do we want the user to input
<input> ; well, this one will define the input, if it is in text or numbers, and it has other numerous possible attributes, as placeholder and required among others.

Here is some of those tags being used:



<form name="payment" action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post" id="payment">
<fieldset class=fix>
<legend>Personal Details</legend>
<ol>
<li>
<label for="name">Name?</label>
<input id="name" name="name" type="text" placeholder="Full name" required="required" autofocus="autofocus">
</li>



The for was particularly difficult to make, because with so many different tags, ones inside of others, the CSS took me quite a lot of time, but in the end, everything worked out as planned. I used the counter example given by the teacher which I though it was an interesting feature.



 fieldset.fix > legend:before { content: counter(fieldset) ". ";
counter-increment: fieldset;
}



The CSS page for this week is quite long, so I will just copy some parts:



form#payment fieldset fieldset legend { color: #111111;
font-size: 29px;
font-weight: normal;
}

form#payment ol li { background: #000000;
background: rgba(255,255,255,.3);
border-color: #000000;
border-color: rgba(255,255,255,.6);
border-style: solid;
border-width: 2px;
border-radius: 5px;
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}

form#payment ol ol li { background: none;
border: none;
}



(...)



form#payment input:not([type=radio]),

form#payment textarea { background: #ffffff;
border: none;
border-radius: 3px;
outline: none;
padding: 5px;
width: 310px;
}

form#payment input:not([type=submit]):focus,

form#payment textarea:focus { background: #eaeaea;}

form#payment input[type=radio] { margin-right: 5px;}




In the end, this is how it looks the Contact Us page:

I had some problems with the validator this time, because I discovered that I cannot include <p> or <br /> inside an ordered list. I was using this method to space between the lines, but the validator interpreted as an error, and so, they were removed. I used margin-bottom instead to make the margins. In the end: 0 errors.


http://1202236.studentplus.abertay.ac.uk/Index/Index.html