Day 6 I think. I am starting to lose track. :) Let's build a simple HTML form using code from Netninja and then change the content to fit ours.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scape cafe form</title>
</head>
<body>
<header>
<img src="img/Scape Cafe 2-01.png" alt="scapecafe's logo">
</header>
<form action="">
<!-- Love scape cafe -->
<p>Do you love Scape Cafe?</p>
<input type="radio" id="yes" name="reply" />
<label for="male">Yes</label><br>
<input type="radio" id="no" name="reply" />
<label for="female">No</label>
<!-- feedback -->
<p>Why do you love Scape Cafe?</p>
<input type="text" id="feedback" name="why_feedback">
<p>Why do you dislike Scape Cafe?</p>
<input type="text" id="feedback" name="why_feedback">
<p>Tick the box to let us know the things you love about Scape Cafe</p>
<p>Leave if non applies to you</p>
<input type="checkbox" id="Coffee">
<label for="Coffee">Coffee</label><br/>
<input type="checkbox" id="tea">
<label for="tea">Our Tea</label><br/>
<input type="checkbox" id="wifi">
<label for="wifi">Wifi</label><br/>
<input type="checkbox" id="services">
<label for="services">Our services</label>
<input type="checkbox" id="breakfast">
<label for="breakfast">Breakfast</label>
<input type="checkbox" id="coziness">
<label for="coziness">Our coziness</label>
<input type="checkbox" id="photographs">
<label for="services">Our services</label>
<input type="checkbox" id="our photographs of the month">
<label for="our">Our weekly photographs of the month</label>
<!-- contact details-->
<fieldset> <!--DEfault style of a fieldset is the have a border around them-->
<legend>Your contact Details</legend>
<input type="email" placeholder="email" required/>
<span class="tick"></span>
<input type="telephone" placeholder="phone number" required/>
<span class="tick"></span>
</fieldset>
<!-- preferred -->
<p>How would you like to be contacted?</p>
<select name="" id="">
<option value="">By Email</option>
<option value="">By Telephone</option>
<input type="submit" value="Become a member">
</select>
</form>
</body>
</html>
This is the output below:
You should go ahead and try it too. Explanation of the code coming up in part 2. :)
References:
Netninja