API tools faq
paste
Guest User

kk

a guest
Apr 10th, 2017
46
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.11 KB | None | 0 0
raw download clone embed print report
  1. FORM CREATION
  2.  
  3.  
  4. <?php
  5.  
  6. $servername = "localhost";
  7. $username = "root";
  8. $password = "";
  9. $dbname = "Database";
  10.  
  11. // Create connection
  12. $conn = mysqli_connect($servername, $username, $password, $dbname);
  13. // Check connection
  14. if (mysqli_connect_errno()) {
  15. die("Connection failed: " . mysqli_connect_error());
  16. }
  17. $fn=$_POST['firstname'];
  18. $ln=$_POST['lastname'];
  19. $dob=$_POST['dob'];
  20. $sql = "insert into records(firstname,lastname,dob) values('$fn','$ln','$dob');";
  21. $r=mysqli_query($conn,$sql);
  22. if(!$r)
  23. {die(mysqli_error($conn));
  24. }
  25. else
  26. {echo "Record created";}
  27.  
  28. $conn->close();
  29. ?>
  30.  
  31. EDIT REDIRECTION
  32.  
  33. <?php
  34.  
  35. $servername = "localhost";
  36. $username = "root";
  37. $password = "";
  38. $dbname = "Database";
  39.  
  40. // Create connection
  41. $conn = mysqli_connect($servername, $username, $password, $dbname);
  42. // Check connection
  43. if (mysqli_connect_errno()) {
  44. die("Connection failed: " . mysqli_connect_error());
  45. }
  46. $fn=$_POST['firstname'];
  47. $sql = "select * from records where firstname='$fn';";
  48. $r=mysqli_query($conn,$sql);
  49. if(!$r)
  50. {die(mysqli_error($conn));
  51. }
  52. else
  53. {
  54. echo" <form action='edit1.php' method='post'>";
  55. while( $row=mysqli_fetch_array($r))
  56. {
  57. echo"<input type='text' value=$row[1] name='firstname'>";
  58. echo"<input type='text' value=$row[2] name='lastname'>";
  59. echo"<input type='text' value=$row[3] name='dob'>
  60. <input type='submit'>
  61. </form>";
  62.  
  63. }
  64. }
  65. $conn->close();
  66. ?>
  67.  
  68.  
  69.  
  70. EDIT CODE
  71.  
  72.  
  73. <?php
  74.  
  75. $servername = "localhost";
  76. $username = "root";
  77. $password = "";
  78. $dbname = "Database";
  79.  
  80. // Create connection
  81. $conn = mysqli_connect($servername, $username, $password, $dbname);
  82. // Check connection
  83. if (mysqli_connect_errno()) {
  84. die("Connection failed: " . mysqli_connect_error());
  85. }
  86. $fn=$_POST['firstname'];
  87. $ln=$_POST['lastname'];
  88. $dob=$_POST['dob'];
  89. $sql = "update records set lastname='$ln', dob='$dob' where firstname='$fn';";
  90. $r=mysqli_query($conn,$sql);
  91. if(!$r)
  92. {die(mysqli_error($conn));
  93. }
  94. else
  95. {echo "Record edited";}
  96.  
  97. $conn->close();
  98. ?>
  99.  
  100.  
  101. FORM-HTML
  102.  
  103.  
  104.  
  105. <html>
  106. <head>
  107. <title>Form to fill the database Records</title>
  108. <style>
  109. .n
  110. {
  111. float:left;
  112. margin-left:10%;
  113. margin-right:10%;
  114. width:30%;
  115. color:red;
  116. background-color:yellow;
  117. }
  118. .r
  119. {
  120. float: left;
  121. width:30%;
  122. margin-left:10%
  123. margin-right:10%
  124. color:blue;
  125. background-color:yellow;
  126. }
  127. .a{background-color:yellow;
  128. }
  129.  
  130. table td:first-child:hover{
  131. padding : 10%;
  132. color:blue;
  133. }
  134. </style>
  135. </head>
  136. <body style="background-color:"yellow">
  137. <h1><b>Please input the respective fields</b></h1>
  138. <br><br>
  139. <div class="a">
  140. <form name="myform" action="form.php" method="post" >
  141. <div class="n"> Enter your first name</div>
  142. <div class="r"><input type="text" name="firstname" required></div>
  143. <br>
  144. <div class="n"> Enter your last name</div>
  145. <div class="r"><input type="text" name="lastname" required></div>
  146. <br>
  147. <div class="n"> Enter your date of birth</div>
  148. <div class="r"> <input type="text" name="dob" required></div>
  149. <br>
  150. <div class="n"> Click here to submit your details</div>
  151. <div class="r"> <input type="submit" onclick="window.alert('Are you sure you want to submit?')"></div>
  152. <br>
  153. </form>
  154. </div>
  155.  
  156. <a href="edit.html">Click here to edit details</a>
  157. <form>
  158. <table>
  159. <tr>
  160. <td width=50%>
  161. First name</td>
  162. <td>
  163. <input type='text'>
  164. </td>
  165. </tr>
  166. <tr>
  167. <td>
  168. baap
  169. </td>
  170. <td>
  171. bera
  172. </td>
  173. </tr>
  174. </table>
  175. </form>
  176. </body>
  177. </html>
  178.  
  179.  
  180. EDIT HTML
  181.  
  182. <html>
  183. <head>
  184. <title>Form to fill the database Records</title>
  185. </head>
  186. <body style="background-color:"yellow">
  187. <h1><b>Please input the respective fields</b></h1>
  188. <br><br>
  189. <div class="a">
  190. <form name="myform" action="edit.php" method="post" >
  191. <div class="n"> Enter the first name for which you want to edit details</div>
  192. <div class="r"><input type="text" name="firstname" required></div>
  193. <div class="n"> Click here to submit your details</div>
  194. <div class="r"> <input type="submit"></div>
  195. <br>
  196. </form>
  197. </div>
  198. </html>
  199.  
  200.  
  201.  
  202. var x=document.getElementsByClassName("hero");
  203. for(i=0;i<x.length;i++)
  204. {
  205. x[i].style.backgroundColor="red";
  206. }
  207.  
  208. EVENT-onchange()-active validation
  209.  
  210.  
  211.  
  212.  
  213.  
  214.  
  215.  
  216. EXERCISE 7: Course Information Webpage
  217.  
  218. HTML Code:
  219.  
  220. <!DOCTYPE html>
  221.  
  222. <html>
  223. <head>
  224.  
  225.  
  226. <style>
  227.  
  228.  
  229.  
  230. .labels {
  231.  
  232. width: 46%;
  233.  
  234. float: left;
  235.  
  236. text-align: right;
  237.  
  238. border: 2px solid green;
  239.  
  240. margin: 10px 1%;
  241.  
  242. }
  243.  
  244.  
  245.  
  246. .inputs {
  247.  
  248. width: 46%;
  249.  
  250. float: left;
  251.  
  252. text-align: left;
  253.  
  254. margin: 10px 1%;
  255.  
  256. }
  257.  
  258.  
  259.  
  260. .bodydiv {
  261.  
  262. background-color: powderblue;
  263.  
  264. border: 2px solid green;
  265.  
  266. width: 60%;
  267.  
  268. margin: 0 auto;
  269.  
  270. border-radius: 25px;
  271.  
  272.  
  273. }
  274.  
  275. .lines {
  276.  
  277. clear: both; }
  278.  
  279.  
  280.  
  281. .input-box {
  282.  
  283.  
  284. width: 100%;
  285.  
  286. border: 2px solid green;
  287.  
  288. }
  289.  
  290. select {
  291. border: 2px solid green;
  292.  
  293. }
  294. textarea {
  295.  
  296. border: 2px solid green;
  297. height: 80px;
  298. }
  299. </style>
  300. </head>
  301.  
  302. <body>
  303. <div class="bodydiv">
  304. <form>
  305. <div class="lines" style="margin: 20px auto;text-align: center;">
  306.  
  307.  
  308.  
  309. <h2 style= font-family: sans-serif;">Course Information</h2>
  310.  
  311.  
  312.  
  313. </div>
  314.  
  315.  
  316.  
  317. <div class="lines">
  318.  
  319.  
  320.  
  321. <div class="labels">Name:</div>
  322.  
  323.  
  324.  
  325. <div class="inputs"><input class="input-box" type="text" name="name"></div>
  326.  
  327.  
  328.  
  329. </div>
  330.  
  331.  
  332.  
  333.  
  334.  
  335.  
  336.  
  337. <div class="lines">
  338.  
  339.  
  340.  
  341. <div class="labels">Email:</div>
  342.  
  343.  
  344.  
  345. <div class="inputs"><input class="input-box" type="email" name="email"></div>
  346.  
  347.  
  348.  
  349. </div>
  350.  
  351.  
  352.  
  353.  
  354.  
  355.  
  356.  
  357. <div class="lines">
  358.  
  359.  
  360.  
  361. <div class="labels">Gender:</div><div class="inputs">
  362.  
  363.  
  364.  
  365. <select class="input-box" name="gender">
  366.  
  367.  
  368.  
  369. <option value="male">
  370.  
  371. Male
  372. </option>
  373. <option value="female"> Female </option>
  374. </select></div> </div>
  375.  
  376. <div class="lines">
  377.  
  378.  
  379.  
  380. <div class="labels">Date of Birth:</div>
  381.  
  382.  
  383.  
  384. <div class="inputs"><input class="input-box" type="date" name="dob"></div>
  385.  
  386.  
  387.  
  388. </div>
  389.  
  390.  
  391. <div class="lines">
  392.  
  393.  
  394.  
  395. <div class="labels">Course Name:</div><div class="inputs"><input class="input-box" type="text" name="cname"></div>
  396.  
  397.  
  398. </div>
  399.  
  400. <div class="lines">
  401.  
  402.  
  403.  
  404. <div class="labels">Course Code:</div><div class="inputs"><input class="input-box" type="text" name="ccode"></div>
  405.  
  406.  
  407.  
  408. </div>
  409.  
  410.  
  411. <div class="lines">
  412.  
  413.  
  414.  
  415. <div class="labels">Slot:</div><div class="inputs">
  416.  
  417.  
  418.  
  419. <select class="input-box">
  420.  
  421.  
  422.  
  423. <option value="5_6">
  424.  
  425.  
  426.  
  427. L33+L34
  428.  
  429.  
  430.  
  431. </option>
  432.  
  433.  
  434.  
  435. </select></div>
  436.  
  437.  
  438.  
  439. </div>
  440.  
  441. <div class="lines">
  442.  
  443.  
  444.  
  445. <div class="labels">Mobile Number:</div><div class="inputs"><input class="input-box" type="number" name="mno"></div>
  446.  
  447.  
  448. </div>
  449.  
  450.  
  451. <div style="width: 96%" class="lines">
  452. <textarea class="input-box" style="margin: 1%;" placeholder="Remarks"></textarea>
  453. </div>
  454. <div class="lines" style="text-align: center;">
  455.  
  456. <input type="Submit" name="Submit" value="Submit" style="margin-bottom: 20px;width: 250px;background:green;height: 40px; color: white; box-shadow: none;">
  457. </div>
  458. </form>
  459. </div>
  460. </body>
  461. </html>
  462.  
  463.  
  464.  
  465.  
  466.  
  467.  
  468.  
  469.  
  470.  
  471.  
  472.  
  473.  
  474.  
  475.  
  476. EXERCISE 8: Form Validation without Javascript
  477.  
  478. HTML Code:
  479.  
  480. <!DOCTYPE html>
  481. <html>
  482. <head>
  483. <title>Form Validation Without Javascript</title>
  484. <style>
  485. body{
  486. background: grey;
  487. }
  488. form{
  489. width: 50%;
  490. margin-left: auto;
  491. margin-right: auto;
  492. background: white;
  493. border-radius: 20px;
  494. }
  495. h1{
  496. color: white;
  497. background: red;
  498. border-radius: 20px 20px 0px 0px;
  499. padding: 2%;
  500. text-align: center;
  501. }
  502. .form {
  503. padding: 2%;
  504. }
  505. input{
  506. margin-left: auto;
  507. margin-right: auto;
  508. width: 80%;
  509. display: block;
  510. outline-color: red;
  511. background-image: url("/home/likewise-open/VITUNIVERSITY/Documents/icons/symbol.png");
  512. background-repeat: no-repeat;
  513. background-position: right;
  514. width: 100%;
  515. padding: 12px 20px;
  516. margin: 8px 0;
  517. box-sizing: border-box;
  518. }
  519. input:focus{
  520. padding: 2%;
  521. display: block;
  522. outline-color: red;
  523. background-image: url("/home/likewise-open/VITUNIVERSITY/14bce0735/Documents/icons/invalid.png");
  524. background-repeat: no-repeat;
  525. background-position: right;
  526. }
  527. input:valid{
  528. display: block;
  529. outline-color: green;
  530. background-image: url("/home/likewise-open/VITUNIVERSITY//Documents/icons/valid.png");
  531. background-repeat: no-repeat;
  532. background-position: right;
  533. }
  534. input[type=submit]:hover {
  535. background-color: darkred;
  536. }
  537.  
  538.  
  539. input[type=submit] {
  540. width: 100%;
  541. background-color: red;
  542. color: white;
  543. padding: 14px 20px;
  544. margin: 8px 0;
  545. border: none;
  546. border-radius: 4px;
  547. cursor: pointer;
  548. background-image: none;
  549. }
  550. </style>
  551. </head>
  552. <body>
  553. <form action="action_page.php">
  554. <h1>HTML and CSS Form Validation</h1>
  555. <div class="form">
  556. <input type="text" name="username" placeholder="Username"
  557. pattern=".{7,}" required>
  558. <input type="password" name="pw" placeholder="Password"
  559. pattern=".{6,}" required>
  560. <input type="email" name="email" placeholder="Email ID"
  561. pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required>
  562. <input type="text" name="phoneNumber" pattern="[0-9]{10}"
  563. placeholder="Mobile Number" required>
  564. <input type="text" name="WebAddress" placeholder="Web Address"
  565. pattern="https?://.+" required>
  566. <div class="form">
  567. <input type="submit" >
  568. </form>
  569. </body>
  570. </html>
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!