API tools faq
paste
Guest User

rick

a guest
Apr 26th, 2017
36
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.60 KB | None | 0 0
raw download clone embed print report
  1. Create a following web form using HTML5 form elements. You are expected to use the given HTML5 tags. Also try some basic HTML5 validation for email id and password.
  2. • <form>
  3. • <fieldset> and <legend> for grouping elements.
  4. • <input> - textbox, email, date, password, radio button, check box, file uploading.
  5. • <textarea>
  6. • <select> and <option> for list
  7. • <button> - Normal Button and Submit Button
  8.  
  9. <html>
  10. <form>
  11. <body>
  12. <fieldset >
  13. <legend>Personal Info</legend>
  14. Email:
  15. <input type="text"><br><br>
  16. Password:
  17. <input type="password"><br><br>
  18. Gender:
  19. <select name="Gender">
  20. <option value="male"> Male</option>
  21. <option value="female">Female</option>
  22. <option value="others">Others</option>
  23. </select><br><br>
  24. Date Of Birth:
  25. <input type="text" value="dd/mm/yyyy"><br>
  26. </fieldset>
  27. <fieldset>
  28. <legend> Preferences</legend>
  29. Favourite color:
  30. <input type="radio" name="color">Blue
  31. <input type="radio" name="color">Red
  32. <input type="radio" name="color">Green<br><br>
  33. Interests:
  34. <input type="checkbox" name="Interests">News
  35. <input type="checkbox" name="Interests">Sports
  36. <input type="checkbox" name="Interests">Entertainment
  37. <input type="checkbox" name="Interests">Technology<br><br>
  38. Languages:
  39. <select multiple name="Languages">
  40. <option value="English"> English</option>
  41. <option value="French">French</option>
  42. <option value="Spanish">Spanish</option>
  43. <option value="Italian">Italian</option>
  44. <option value="German">German</option>
  45. </select><br><br>
  46.  
  47. </fieldset>
  48. <fieldset>
  49. <legend>Comments</legend>
  50. <textarea name="message" rows="8" cols="30"></textarea><br><br>
  51. Upload A File:
  52. <input type="file"><br><br>
  53. <input type"submit" value="submit">
  54. </fieldset>
  55. </body>
  56. </form>
  57. </html>
  58.  
  59. Q) Design the following HTML form using CSS properties with given guidelines.
  60. <html>
  61. <head>
  62. <link rel="stylesheet" href="main.css"/>
  63. </head>
  64. <form align=center>
  65. <style>
  66. body{
  67. background-color: lightgreen;
  68. }
  69. input [type=text]
  70. select{
  71. width: 24px;
  72. padding: 12px 20px;
  73. border: 1px sea green;
  74. display: inline-block;
  75. margin: 8px 0;
  76. box-sizing: border-box;
  77. }
  78. input[type=submit]
  79. {
  80. background-color: orange;
  81. padding: 20px 80px;
  82. }
  83.  
  84. .div1 {
  85.  
  86. float: left;
  87.  
  88. width: 45%;
  89.  
  90. padding: 1px;
  91.  
  92. margin-bottom: 10px;
  93.  
  94. display: inline-block;
  95.  
  96. border: 2px solid green;
  97. text-align: right;
  98. font-family: "Times New Roman", Times, serif;
  99.  
  100. }
  101.  
  102.  
  103.  
  104.  
  105. .labels1{
  106. width: 45%;
  107. float: left;
  108. text-align:right;
  109. border: solid;
  110.  
  111. }
  112.  
  113. .inputboxes{
  114. width: 45%;
  115. float: left;
  116.  
  117. }
  118.  
  119. .ros{
  120. clear: both;
  121. }
  122.  
  123.  
  124.  
  125. </style>
  126. <fieldset style="width: 50%; margin: 0 auto">
  127. <h1> <p style="color:blue; text-align:center">Course Information</h1>
  128. <div class="ros">
  129. <div class="labels1">Name:</div>
  130. <div class="inputboxes"><input type="text" name="name"></div>
  131. </div>
  132. <br>
  133. <div class="ros">
  134. <div class="labels1">Email:</div>
  135. <div class="inputboxes"><input type="email" name="email"></div>
  136. </div><br>
  137. <div class="ros">
  138. <div class="labels1">Gender:</div>
  139. <div class="inputboxes"><select name="gender">
  140.  
  141. <option value="male">Male</option>
  142. <option value="female">Female</option>
  143. </select></div></div><br>
  144.  
  145. <div class="ros">
  146. <div class="labels1">
  147. Date Of Birth:
  148. </div>
  149.  
  150. <div class="inputboxes"><input type="date" value="dd-mm-yyyy">
  151. </div><br>
  152. </div>
  153. <div class="ros">
  154. <div class="labels1">
  155. Course Name:
  156. </div>
  157. <input type="text"></div><br>
  158. <div class="ros">
  159. <div class="labels1">
  160. Course Code:
  161. </div>
  162. <input type="text"></div><br>
  163. <div class="ros">
  164. <div class="labels1">
  165. Slot:
  166. </div>
  167. <select name="slot">
  168. <option value="L5+6">L5+6</option>
  169. <option value="L7+8">L7+8</option>
  170. <option value="L1+2">L1+2</option>
  171. </select></div></div><br>
  172. <div class="ros">
  173. <div class="labels1">
  174. Mobile Number:
  175. </div>
  176. <input type="text" name="mobno"></div><br>
  177. <textarea name="message" rows="8" cols="70">Remarks</textarea><br>
  178. <input type="submit" value="submit">
  179.  
  180. </fieldset>
  181. </form>
  182. </html>
  183.  
  184. Q)Design the following Form and validate all form components with proper regular expression pattern.
  185. <html> <head> <style>
  186. div{
  187. }
  188.  
  189. .div1{
  190. width: 50%;
  191.  
  192. padding: 10px;
  193. border: 5px solid gray;
  194. margin: 0 auto;
  195. border-radius: 45px;
  196. padding-top: 0;
  197. background-color: white;
  198. }
  199. .div2{
  200. background-color: blue;
  201. margin: 0;
  202. width:100%;
  203. border-radius: 25px;
  204. }
  205. h1{
  206.  
  207. color:white;
  208. margin: 0;
  209.  
  210. }
  211. input[type=text],[type=password]{
  212. width: 100%;
  213. padding: 12px 20px;
  214. margin: 8px 0;
  215. box-sizing: border-box;
  216. border: 2px solid gray;
  217. border-radius: 4px;
  218.  
  219. }
  220. input:required{
  221. background: url('./icons/symbol.png');
  222. background-position: right;
  223. background-repeat: no-repeat;
  224. }
  225. input:invalid{
  226. border-color: darkred;
  227. border-width: 2px;
  228. background:;
  229. background-position: right;
  230. background-repeat: no-repeat;
  231. }
  232. input:valid{
  233. border-color: green;
  234. border-width: 100%;
  235. background: url('./icons/valid.png');
  236. background-position: right;
  237. background-repeat: no-repeat;
  238. }
  239. </style>
  240. </head>
  241. <body bgcolor="grey" >
  242. <form>
  243. <div class="div1" align="center">
  244. <div class="div2"><h1>HTML AND CSS FORM VALIDATION</h1></div><br>
  245. <div class="input-style"><input type="text" name="firstname" placeholder="Username" pattern="[A-Z]+[A-Za-z0-9]*" required></div><br>
  246. <div class="input-style"><input type="password" name="password" placeholder="Password" pattern="{8}.*" required></div><br>
  247. <div class="input-style">
  248. <input type="text" name="eamilid" placeholder="Email ID" required></div><br>
  249. <div class="input-style"><input type="text" name="mobile" placeholder="Mobile Number" required></div><br>
  250. <div class="input-style"><input type="text" name="web" placeholder="Web Address" required></div><br>
  251. <button type="button" name="signin" value="signin" style="height:50px;width:150px;background-color: blue; color:white">Sign In</button>
  252. </div>
  253. </form>
  254. </html>
  255.  
  256. Q) Design the following form using HTML5 and CSS.
  257. • Validate all fields by using HTML5 pattern attribute
  258. • Also send the form values to PHP program and display it in table format.
  259. HTML CODE:
  260. <html>
  261. <head>
  262. <style>
  263. div
  264. {
  265. background-color: lightgrey;
  266. width: 300px;
  267.  
  268. padding: 25px;
  269. margin-left: 525px;}
  270. h2
  271. {
  272. background-color:darkgreen;
  273. width: 100%;
  274. }
  275. input[type=submit]
  276. {
  277. width: 100%;
  278. background-color: #4CAF50;
  279. color: white;
  280. padding: 14px 20px;
  281. margin: 8px 0;
  282. border: none;
  283. border-radius: 4px;
  284. cursor: pointer;
  285. }
  286. input[type=text], select
  287. {
  288. width: 100%;
  289. padding: 12px 20px;
  290. margin: 8px 0;
  291. display: inline-block;
  292. border: 1px solid #ccc;
  293. border-radius: 4px;
  294. box-sizing: border-box;
  295. }
  296.  
  297. </style>
  298. </head>
  299. <body>
  300. <div>
  301. <h2>VIT UNIVERSITY</h2>
  302. <i>Student Information</i>
  303.  
  304. <form action="act7.php" method="get">
  305. <fieldset>
  306. <input type="text" name="name" placeholder="Name" required pattern="\w+ \w+"><br>
  307.  
  308. <input type="text" name="regno" placeholder="Register Number" "\d{2}\w{3}\d{4}"><br>
  309. <input type="radio" name="gender" value="male"> Male
  310. <input type="radio" name="gender" value="female" checked> Female<br>
  311. <input type="text" name="email" placeholder="E-mail"><br>
  312. <input type="text" name="nnum" placeholder="Mobile Number" required pattern="\d{10}"><br>
  313.  
  314. <select name="branch">
  315. <option value="CSE">CSE</option>
  316. <option value="ECE">ECE</option>
  317. <option value="EEE">EEE</option>
  318. <option value="MEC">MEC</option>
  319. </select><br>
  320. <input type="submit" value="Submit Information">
  321. </fieldset>
  322. </form>
  323. </div>
  324. </body>
  325. </html>
  326.  
  327.  
  328.  
  329.  
  330. PHP CODE:
  331. <html>
  332. <style>
  333. table, td{
  334. border: 3px solid black;
  335. }
  336. </style>
  337. <body>
  338. <table style="border-collapse: collapse;">
  339. <tr>
  340. <td>Name</td>
  341. <td><?php echo $_GET["name"]; ?></td><br>
  342. </tr>
  343. <tr>
  344. <td>Regno</td>
  345. <td><?php echo $_GET["regno"];?><br></td>
  346. </tr>
  347. <tr>
  348. <td>Gender</td>
  349. <td><?php echo $_GET["gender"];?></td><br>
  350. </tr>
  351. <tr>
  352. <td>Email</td>
  353. <td><?php echo $_GET["email"];?><br></td>
  354. </tr>
  355. <tr>
  356. <td>Mobile</td>
  357. <td><?php echo $_GET["nnum"];?><br></td>
  358. </tr>
  359. <tr>
  360. <td>Branch</td>
  361. <td><?php echo $_GET["branch"];?></td></tr>
  362. </table>
  363.  
  364.  
  365. </body>
  366. </html>
  367.  
  368. Q) Write a PHP application to display the students marks and attendance details. Below are the pages in the application:
  369. The user should not be able to visit home, attendance and marks pages without login. If a user tries to do so, they should be redirected to login page. The marks and attendance should be user specific.
  370. act9.php:
  371.  
  372. <?php
  373.  
  374. $conn = new mysqli('localhost' , 'scse', 'scse', 'scse');
  375.  
  376. $usr = "Ipsha";
  377. $pwd = md5("abcd123!");
  378.  
  379. $res1 = $conn->query("insert into authenticate values('Ipsha', 'abcd1234!');");
  380.  
  381.  
  382. $res2 = $conn->query("insert into marks values('Ipsha',70,80,80);");
  383.  
  384.  
  385. $res3 = $conn->query("insert into atendance values('Ipsha',75,75,75);");
  386.  
  387. if($res1 && $res2 && $res3)
  388. echo "Success";
  389. ?>
  390.  
  391.  
  392.  
  393. act91.php
  394.  
  395. <?php
  396. session_start();
  397. if(isset($_POST["submitform"]))
  398. {
  399. $usr = $_POST["username"];
  400. $pwd = $_POST["password"];
  401.  
  402. $conn = new mysqli('localhost' , 'scse', 'scse', 'scse');
  403. $sql = "select * from authenticate where username = '$usr'";
  404. echo $sql;
  405. if($res = $conn->query($sql))
  406. {
  407. echo "hi";
  408. $row = $res->fetch_assoc();
  409. echo "hello";
  410. echo $pwd;
  411. echo $row["password"];
  412. //$cpwd = md5($pwd);
  413. if($pwd == $row["password"])
  414. {
  415. echo "hi";
  416. $_SESSION['user'] = $usr;
  417. header('Location:act92.php');
  418. }
  419.  
  420. }
  421.  
  422. }
  423. ?>
  424. <html>
  425. <head>
  426. </head>
  427. <body>
  428. <form method="post" action="">
  429. Username:<input type="text" name="username"></input><br>
  430. Password:<input type="password" name="password"></input><br>
  431. <input type="submit" name="submitform"></input>
  432. </form>
  433. </body>
  434. </html>
  435.  
  436.  
  437. act92.php
  438.  
  439. <?php
  440. session_start();
  441. if(!isset($_SESSION["user"]))
  442. header('location:act91.php');
  443. ?>
  444. <html>
  445. <head>
  446. </head>
  447. <body>
  448. <ul>
  449. <li><a href="act93.php">Marks</a></li>
  450. <li><a href="act94.php">Attendance</a></li>
  451. </ul>
  452. <footer><a href="act95.php">Logout</a></footer>
  453. </body>
  454. </html>
  455.  
  456. act93.php
  457.  
  458. <?php
  459. session_start();
  460. if(!isset($_SESSION["user"]))
  461. header('location:act91.php');
  462. ?>
  463. <html>
  464. <head>
  465. </head>
  466. <body>
  467. <?php
  468. $conn = new mysqli('localhost' , 'scse', 'scse', 'scse');
  469. $usr = $_SESSION["user"];
  470. $sql = "select * from marks where username = '$usr';";
  471.  
  472. if($res = $conn->query($sql))
  473. {
  474. $row = $res->fetch_assoc();
  475. echo "<p>Subject -- Marks</p>";
  476. foreach($row as $k=>$v)
  477. echo "<p>".$k." -- ".$v."</p>";
  478. }
  479. ?>
  480. <footer><a href="logout.php">Logout</a></footer>
  481. </body>
  482. </html>
  483.  
  484.  
  485. act94.php
  486. <?php
  487. session_start();
  488. if(!isset($_SESSION["user"]))
  489. header('location:act91.php');
  490. ?>
  491. <html>
  492. <head>
  493. </head>
  494. <body>
  495. <?php
  496. $conn = new mysqli('localhost' , 'scse', 'scse', 'scse');
  497. $usr = $_SESSION["user"];
  498. $sql = "select * from attendance where username = '$usr';";
  499.  
  500. if($res = $conn->query($sql))
  501. {
  502. $row = $res->fetch_assoc();
  503. echo "<p>Subject -- Attendance</p>";
  504. foreach($row as $k=>$v)
  505. echo "<p>".$k." -- ".$v."</p>";
  506. }
  507. ?>
  508. <footer><a href="logout.php">Logout</a></footer>
  509. </body>
  510. </html>
  511.  
  512. act95.php
  513.  
  514. <?php
  515. session_start();
  516. unset($_SESSION['user']);
  517. session_destroy();
  518. header('location:act91.php');
  519. ?>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!