· 6 years ago · Nov 06, 2019, 08:00 AM
1
2Q) Design the following HTML form using CSS properties with given guidelines. Entire form
3should be displayed at the center of the web page. Use Custom Font for displaying page
4content (Fonts can be downloaded from Moodle Course page). Do not use Table for
5designing/aligning form elements . All form elements should have uniform width, height,
6border and font size.
7
8Ans)
9
10HTML Code
11<html>
12<head>
13 <style>
14 @font-face{
15 font-family: Lakshay;
16 src: url(Delicious-BoldItalic.otf);
17 }
18 .outer{
19 position: relative;
20 background-color: lightblue;
21 margin: auto;
22 width: 50%;
23 border: 3px solid green;
24 border-radius: 10px;
25 padding: 8px;
26 font-family: Lakshay;
27 }
28 h1{
29 position: relative;
30 text-align: center;
31 }
32 .remarks{
33 width: 100%;
34 margin: auto;
35 height: 60px;
36 border: 2px solid green;
37 }
38
39 input,select{
40 width: 45%;
41 border: 2px solid green;
42 height: 30px;
43 right: 0%;
44 }
45
46 .leftnames{
47 border: 2px solid green;
48 float: left;
49 width: 45%;
50 margin-right: 8%;
51 text-align: right;
52 height: 25px;
53 font-size: 18px;
54 }
55 .submit{
56 position: relative;
57 color: white;
58 background-color: darkgreen;
59 width: 40%;
60 border: 1px solid black;
61 height: 35px;
62 left: 30%;
63 font-size: 17px;
64 font-weight: bold;
65 }
66 .submit:hover{
67 position: relative;
68 color: darkgreen;
69 background-color: lightblue;
70 width: 40%;
71 border: 1px solid black;
72 height: 35px;
73 left: 30%;
74 font-size: 17px;
75 font-weight: bold;
76 cursor: pointer;
77 }
78 </style>
79</head>
80<body>
81 <div class="outer">
82 <h1> Course Information </h1>
83 <form>
84 <div class="leftnames">
85 Name
86 </div>
87 <input type="text"><br><br>
88 <div class="leftnames">
89 Email
90 </div>
91 <input type="email"><br><br>
92 <div class="leftnames">
93 Gender
94 </div>
95 <select>
96 <option value="male">Male</option>
97 <option value="female">Female</option>
98 </select><br><br>
99 <div class="leftnames">
100 Date of Birth
101 </div>
102 <input type="date"><br><br>
103 <div class="leftnames">
104 Course Name
105 </div>
106 <input type="text"><br><br>
107 <div class="leftnames">
108 Course Code
109 </div>
110 <input type="text"><br><br>
111 <div class="leftnames">
112 Slot
113 </div>
114 <select>
115 <option value="L2324">L23+24</option>
116 <option value="L34">L3+4</option>
117 </select><br><br>
118 <div class="leftnames">
119 Mobile Number
120 </div>
121 <input type="number"><br><br>
122 <textarea placeholder="Remarks" class="remarks"></textarea><br><br>
123 <button type="submit" class="submit">
124 SUBMIT
125 </button>
126 </form>
127 </div>
128</body>
129</html>
130
131Screenshot
132
133
134
135
136
137
138PHP FORM VALIDATION
139
140<!DOCTYPE html>
141<html style="background-color:lightgrey" lang="en">
142<head>
143 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
144 <meta content="utf-8" http-equiv="encoding">
145 <style>
146 .outer{
147 position: relative;
148 width: 800px;
149 background-color: #555555;
150 border: 30px solid black;
151 padding: 20px;
152 margin: auto;
153 }
154 .names{
155 position: relative;
156 color:white;
157 float:left;
158 margin-right: 5%;
159 width: 150px;
160 }
161 span{
162 color:red;
163 font-weight: bold;
164 }
165 </style>
166 <title> IWP Experiment 5 </title>
167</head>
168<body>
169 <?php
170 $loginErr = $passwordErr = $cpasswordErr = $emailErr = "";
171 $login = $password = $cpassword = $email = "";
172 if ($_SERVER["REQUEST_METHOD"] == "POST")
173 {
174 if (empty($_POST["login"]))
175 {
176 $loginErr = "Login name is required";
177 }
178 else {
179 $login = test_input($_POST["login"]);
180 if (!preg_match("/^.{8,}$/",$login))
181 {
182 $loginErr = "Invalid Login";
183 }
184 }
185 if (empty($_POST["password"]))
186 {
187 $passwordErr = "Password is Required";
188 }
189 else {
190 $password = test_input($_POST["password"]);
191 if (!preg_match("/^.*(?=.{16})(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).*$/",$password))
192 {
193 $passwordErr = "Invalid Password Format";
194 }
195 }
196 if (empty($_POST["cpassword"]))
197 {
198 $cpasswordErr = "Confirm Password is required";
199 }
200 else {
201 $cpassword = test_input($_POST["cpassword"]);
202 if ($password != $cpassword)
203 {
204 $cpasswordErr = "Password not match";
205 }
206 }
207 if (empty($_POST["email"]))
208 {
209 $emailErr = "Email is required";
210 }
211 else {
212 $email = test_input($_POST["email"]);
213 if (!filter_var($email, FILTER_VALIDATE_EMAIL))
214 {
215 $emailErr = "Invalid Email";
216 }
217 }
218 }
219
220 function test_input($data)
221 {
222 $data = trim($data);
223 $data = stripslashes($data);
224 $data = htmlspecialchars($data);
225 return $data;
226 }
227 ?>
228 <div class="outer">
229 <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
230 <div class="names">Login</div>
231 <input name="login" id="login" type="text"></input>
232 <span><?php echo $loginErr;?></span><br><br>
233 <div class="names">Password</div>
234 <input name="password" id="password" type="password"></input>
235 <span><?php echo $passwordErr;?></span><br><br>
236 <div class="names">Confirm Password</div>
237 <input name="cpassword" id="cpassword" type="password"></input>
238 <span><?php echo $cpasswordErr;?></span><br><br>
239 <div class="names">Gender</div>
240 <select required>
241 <option value="Male">Male</option>
242 <option value="Female">Female</option>
243 </select><br><br>
244 <div class="names">Email</div>
245 <input name="email"></input>
246 <span><?php echo $emailErr;?></span><br><br>
247 <input type="submit" value="Register" style="font-size:20px;"></input><br><br>
248 </form>
249 </div>
250</body>
251</html>
252
253HTML CSS JavaScript
254<html style="background-color:lightgrey">
255<head>
256 <style>
257 .outer{
258 position: relative;
259 width: 500px;
260 background-color: #555555;
261 border: 30px solid black;
262 padding: 20px;
263 margin: auto;
264 }
265 .names{
266 position: relative;
267 color:white;
268 float:left;
269 margin-right: 5%;
270 width: 150px;
271 }
272
273 </style>
274
275 <script>
276 function check(){
277 l=document.getElementById('login').value;
278 p1=document.getElementById('password').value;
279 p2=document.getElementById('cpassword').value;
280 if(p1!=p2){
281 document.getElementById('msg').innerHTML="Passwords Don't Match";
282 document.getElementById('cpassword').style.backgroundColor="pink";
283 flag=1;
284 }
285 if(p1.length>16){
286 document.getElementById('pw').innerHTML="Strong";
287 document.getElementById('password').style.backgroundColor="lightgreen";
288 }
289 if(l.length>8){
290 document.getElementById('login').style.backgroundColor="lightgreen";
291 }
292 if(flag==0)
293 return true;
294 else
295 return false;
296 }
297
298 </script>
299</head>
300<body>
301 <div class="outer">
302 <form onsubmit="return check()">
303 <div class="names">Login</div>
304 <input id="login" type="text" pattern="[A-Za-z0-9]{8,}" required></input><br><br>
305 <div class="names">Password</div>
306 <input id="password" type="password" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{16,}" required></input>
307 <span id="pw" style="color:white"></span><br><br>
308 <div class="names">Confirm Password</div>
309 <input id="cpassword" type="password" required></input><br><br>
310 <div class="names">Gender</div>
311 <select required>
312 <option value="Male">Male</option>
313 <option value="Female">Female</option>
314 </select><br><br>
315 <div class="names">Email</div>
316 <input type="email" required></input><br><br>
317 <input type="submit" value="Register" style="font-size:20px;"></input><br><br>
318 <div id="msg" style="color:white"></div>
319 </form>
320 </div>
321</body>
322</html>
323
324HTML and PHP
325
326<html>
327<meta charset="utf-8" />
328
329<head>
330<style>
331form {
332background-color: #f1f1f1;
333width: 20vw;
334height: 75vh;
335padding: 30px;
336font-family: roboto, arial, sans-serif;
337font-weight: bold;
338}
339
340input {
341background-color: white;
342border-radius: 0;
343border-style: solid;
344font-weight: normal;
345margin: 10px 0;
346}
347
348#month-selector {
349display: inline;
350}
351
352#gender {
353width: 367px;
354}
355
356#uname-box {
357font-weight: normal;
358}
359</style>
360<link rel="stylesheet" href="intlTelInput.css">
361</head>
362
363<body>
364<form method="POST">
365Name
366<br>
367<input placeholder="First" type="text" name="first_name" />
368<input placeholder="Last" name="last_name" />
369<br>Choose your username
370<br>
371<div id="uname-box">
372<input name="uname" value="" autofocus="autofocus" style="width:47%;" />
373<span class="uname">@gmail.com</span>
374</div>
375<br>Create a password
376<br>
377<input name="pass" type="password" style="width:367px;" />
378<br>Confirm your password
379<br>
380<input name="cpass" type="password" style="width:367px;" />
381<br>Birthday
382<br>
383<div id="month-selector">
384<select id="month" name="month">
385<option selected>January</option>
386<option>February</option>
387<option>March</option>
388<option>April</option>
389<option>May</option>
390<option>June</option>
391<option>July</option>
392<option>August</option>
393<option>September</option>
394<option>October</option>
395<option>November</option>
396<option>December</option>
397</select>
398</div>
399<input id="day" name="day" type="number" placeholder="Day" style="width:126px;" />
400<input id="year" name="year" type="number" placeholder="Year" style="width:126px;" />
401<br>
402<br> Gender
403<br>
404<select id="gender" name="gender">
405<option selected>I am...</option>
406<option>Male</option>
407<option>Female</option>
408</select>
409<br>
410<br> Mobile Phone
411<br>
412
413<div class="intl-tel-input allow-dropdown" style="width:367px;" >
414<div class="flag-container">
415<div class="selected-flag" role="combobox" aria-owns="country-listbox" tabindex="0" title="United States: +1">
416<div class="iti-flag in"></div>
417<div class="iti-arrow"></div>
418</div>
419</div>
420<input id="phone" name="phone" autocomplete="off" placeholder="" type="tel" style="width:100%;" >
421</div>
422<br>
423<br>
424Current Email<br>
425<input name="cemail" />
426<br> location
427<br>
428<select id="location" name="location">
429<option selected>India (भारत)</option>
430</select>
431<br> Photo<br>
432<input type="file" name="pic" style="width:266px">
433<input id="submit" type="submit" name="submit" value="Next Step" style="background-color:#458afb;border-style:solid;width:100px; height:36px;border:0;font-weight:bold;color:white"/>
434</form>
435</body>
436
437</html>
438<?php
439if (isset($_POST['submit'])) {
440echo "<table border='1'>
441<tr>
442<th>Username</th>
443<th>Name</th>
444<th>Password</th>
445<th>Confirm Password</th>
446<th>Birthday</th>
447<th>Gender</th>
448<th>Mobile</th>
449<th>email</th>
450<th>Location</th>
451</tr>";
452echo "<tr>";
453echo "<td>" . $_POST['uname'] . "@gmail.com </td>";
454echo "<td>" . $_POST['first_name'] . " " . $_POST['last_name'] . "</td>";
455echo "<td>" . $_POST['pass'] . "</td>";
456echo "<td>" . $_POST['cpass'] . "</td>";
457echo "<td>" . $_POST['month'] . " " . $_POST['day'] . " " . $_POST['year'] . "</td>";
458echo "<td>" . $_POST['gender'] . "</td>";
459echo "<td>" . $_POST['phone'] . "</td>";
460echo "<td>" . $_POST['cemail'] . "</td>";
461echo "<td>" . $_POST['location'] . "</td>";
462echo "</tr>";
463echo "</table>";
464if ($_FILES['image']['name']) {
465echo 'No Error';
466if (!$_FILES['image']['error']) {
467echo 'No Error';
468$name = $_FILES['image']['name'];
469$ext = end((explode(".", $name)));
470$new_file_name = $_POST['name'] . '_' . time() . '.' . $ext;
471echo $new_file_name;
472//if the file has passed the test
473if (move_uploaded_file($_FILES['image']['tmp_name'], 'upload/' . $new_file_name)) {
474$message = 'Congratulations! Your file was accepted.';
475echo $message;
476}
477$directory = "uploads/";
478$filecount = 0;
479$files = glob($directory . "*.jpg");
480if ($files) {
481$filecount = count($files);
482}
483echo "There were $filecount image files";
484}
485//if there is an error...
486else {
487//set that to be the returned message
488$message = 'Ooops! Your upload triggered the following error: ' . $_FILES['image']['error'];
489echo $message;
490}
491}
492}
493?>
494
495Php +sql
496
497
498
499<?php
500
501$con=mysql_connect("localhost","scse","scse");
502
503if($con)
504
505 echo "connected successfully";
506
507else
508
509 echo "not connected";
510
511
512mysql_select_db("scse");
513
514$query = mysql_query("select * from supes");
515
516while($res=mysql_fetch_array($query))
517
518{
519
520 foreach($res as $value)
521
522 {
523
524 echo $value;
525
526 }
527
528}
529
530?>