{"id":2094,"date":"2025-09-15T08:35:54","date_gmt":"2025-09-15T08:35:54","guid":{"rendered":"https:\/\/itxperts.co.in\/blog\/?p=2094"},"modified":"2025-09-15T08:36:44","modified_gmt":"2025-09-15T08:36:44","slug":"html-form-examples-for-students","status":"publish","type":"post","link":"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/","title":{"rendered":"HTML Form Examples with Source Code for Students"},"content":{"rendered":"\n

Login Form UI<\/span><\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n  <title>Login Form<\/title>\n  <style>\n    body {\n      margin: 0;\n      font-family: Arial, sans-serif;\n      \/* Background with gradient *\/\n      background: linear-gradient(to right, #6a11cb, #2575fc);\n    }\n\n    .login-box {\n      width: 300px;\n      background: #fff;\n      padding: 20px;\n      border-radius: 10px;\n      box-shadow: 0px 5px 15px rgba(0,0,0,0.3);\n      margin: 100px auto;\n      text-align: center;\n    }\n\n    .login-box h2 {\n      margin-bottom: 20px;\n      color: #333;\n    }\n\n    .login-box input {\n      width: 90%;\n      padding: 10px;\n      margin: 10px 0;\n      border: 1px solid #ccc;\n      border-radius: 5px;\n      transition: 0.3s;\n    }\n\n    \/* Hover effect for input *\/\n    .login-box input:hover {\n      border-color: #2575fc;\n      box-shadow: 0px 0px 5px #2575fc;\n    }\n\n    .login-box button {\n      width: 95%;\n      padding: 10px;\n      border: none;\n      border-radius: 5px;\n      background: #2575fc;\n      color: white;\n      font-size: 16px;\n      cursor: pointer;\n      transition: 0.3s;\n    }\n\n    \/* Hover effect for button *\/\n    .login-box button:hover {\n      background: #6a11cb;\n      box-shadow: 0px 5px 15px rgba(0,0,0,0.4);\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <div class=\"login-box\">\n    <h2>Login<\/h2>\n    <form>\n      <input type=\"text\" placeholder=\"Username\" required><br>\n      <input type=\"password\" placeholder=\"Password\" required><br>\n      <button type=\"submit\">Login<\/button>\n    <\/form>\n  <\/div>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n  <title>Login Form<\/title>\n  <style>\n    body {\n      margin: 0;\n      font-family: Arial, sans-serif;\n      height: 100vh;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      \/* Gradient background *\/\n      background: linear-gradient(135deg, #ff9a9e, #fad0c4);\n    }\n\n    .login-box {\n      background: #fff;\n      padding: 25px;\n      border-radius: 12px;\n      box-shadow: 0px 6px 18px rgba(0,0,0,0.3);\n      width: 350px;\n      transition: 0.3s;\n    }\n\n    \/* Hover effect on whole box *\/\n    .login-box:hover {\n      transform: translateY(-5px);\n      box-shadow: 0px 12px 28px rgba(0,0,0,0.4);\n    }\n\n    .login-box h2 {\n      text-align: center;\n      margin-bottom: 20px;\n      color: #333;\n    }\n\n    table {\n      width: 100%;\n    }\n\n    td {\n      padding: 8px;\n    }\n\n    input {\n      width: 95%;\n      padding: 10px;\n      border: 1px solid #ccc;\n      border-radius: 6px;\n      transition: 0.3s;\n    }\n\n    \/* Hover effect for input *\/\n    input:hover {\n      border-color: #ff6a88;\n      box-shadow: 0px 0px 6px #ff6a88;\n    }\n\n    button {\n      width: 100%;\n      padding: 12px;\n      border: none;\n      border-radius: 6px;\n      background: linear-gradient(to right, #ff6a88, #ff99ac);\n      color: white;\n      font-size: 16px;\n      cursor: pointer;\n      margin-top: 10px;\n      transition: 0.3s;\n    }\n\n    button:hover {\n      background: linear-gradient(to right, #ff99ac, #ff6a88);\n      box-shadow: 0px 6px 16px rgba(0,0,0,0.3);\n    }\n\n    .extra {\n      text-align: center;\n      margin-top: 12px;\n      font-size: 14px;\n    }\n\n    .extra a {\n      color: #ff6a88;\n      text-decoration: none;\n    }\n\n    .extra a:hover {\n      text-decoration: underline;\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <div class=\"login-box\">\n    <h2>Login<\/h2>\n    <form>\n      <table>\n        <tr>\n          <td><label for=\"user\">Username:<\/label><\/td>\n        <\/tr>\n        <tr>\n          <td><input type=\"text\" id=\"user\" placeholder=\"Enter Username\" required><\/td>\n        <\/tr>\n        <tr>\n          <td><label for=\"pass\">Password:<\/label><\/td>\n        <\/tr>\n        <tr>\n          <td><input type=\"password\" id=\"pass\" placeholder=\"Enter Password\" required><\/td>\n        <\/tr>\n        <tr>\n          <td><button type=\"submit\">Login<\/button><\/td>\n        <\/tr>\n      <\/table>\n    <\/form>\n    <div class=\"extra\">\n      <p>Forgot password? <a href=\"#\">Click here<\/a><\/p>\n    <\/div>\n  <\/div>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n  <title>Signup Form<\/title>\n  <style>\n    body {\n      margin: 0;\n      font-family: Arial, sans-serif;\n      background: linear-gradient(120deg, #74ebd5, #ACB6E5);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 100vh;\n    }\n\n    .signup-box {\n      background: #fff;\n      padding: 25px;\n      border-radius: 12px;\n      box-shadow: 0px 6px 18px rgba(0,0,0,0.3);\n      width: 400px;\n    }\n\n    .signup-box h2 {\n      text-align: center;\n      margin-bottom: 20px;\n      color: #1877f2;\n    }\n\n    .row {\n      display: flex;\n      gap: 10px;\n      margin-bottom: 12px;\n    }\n\n    .row input {\n      flex: 1;\n      padding: 10px;\n      border: 1px solid #ccc;\n      border-radius: 6px;\n      transition: 0.3s;\n    }\n\n    input, select {\n      width: 100%;\n      padding: 10px;\n      margin-bottom: 12px;\n      border: 1px solid #ccc;\n      border-radius: 6px;\n      transition: 0.3s;\n    }\n\n    input:hover, select:hover {\n      border-color: #1877f2;\n      box-shadow: 0px 0px 6px #1877f2;\n    }\n\n    label {\n      font-size: 14px;\n      color: #333;\n      display: block;\n      margin-bottom: 6px;\n    }\n\n    .gender-options {\n      display: flex;\n      gap: 15px;\n      margin-bottom: 15px;\n    }\n\n    .gender-options label {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n\n    button {\n      width: 100%;\n      padding: 12px;\n      border: none;\n      border-radius: 6px;\n      background: #42b72a;\n      color: white;\n      font-size: 16px;\n      cursor: pointer;\n      transition: 0.3s;\n    }\n\n    button:hover {\n      background: #36a420;\n      box-shadow: 0px 6px 16px rgba(0,0,0,0.3);\n    }\n\n    .info {\n      font-size: 12px;\n      color: #555;\n      margin-top: 10px;\n      text-align: center;\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <div class=\"signup-box\">\n    <h2>Create a New Account<\/h2>\n    <form>\n      <div class=\"row\">\n        <input type=\"text\" placeholder=\"First name\" required>\n        <input type=\"text\" placeholder=\"Last name\" required>\n      <\/div>\n      <input type=\"email\" placeholder=\"Mobile number or email\" required>\n      <input type=\"password\" placeholder=\"New password\" required>\n\n      <label>Date of birth<\/label>\n      <div class=\"row\">\n        <select required>\n          <option>Day<\/option>\n          <option>1<\/option>\n          <option>2<\/option>\n          <option>3<\/option>\n        <\/select>\n        <select required>\n          <option>Month<\/option>\n          <option>Jan<\/option>\n          <option>Feb<\/option>\n          <option>Mar<\/option>\n        <\/select>\n        <select required>\n          <option>Year<\/option>\n          <option>2000<\/option>\n          <option>2001<\/option>\n          <option>2002<\/option>\n        <\/select>\n      <\/div>\n\n      <label>Gender<\/label>\n      <div class=\"gender-options\">\n        <label><input type=\"radio\" name=\"gender\" required> Female<\/label>\n        <label><input type=\"radio\" name=\"gender\"> Male<\/label>\n        <label><input type=\"radio\" name=\"gender\"> Custom<\/label>\n      <\/div>\n\n      <button type=\"submit\">Sign Up<\/button>\n    <\/form>\n\n    <div class=\"info\">\n      By clicking Sign Up, you agree to our Terms and Privacy Policy.\n    <\/div>\n  <\/div>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Contact Form<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n  <title>Contact Us Form<\/title>\n  <style>\n    body {\n      margin: 0;\n      font-family: Arial, sans-serif;\n      background: linear-gradient(135deg, #00c6ff, #0072ff);\n      height: 100vh;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n\n    .contact-box {\n      background: #fff;\n      padding: 25px;\n      width: 400px;\n      border-radius: 12px;\n      box-shadow: 0px 6px 18px rgba(0,0,0,0.3);\n      transition: 0.3s;\n    }\n\n    \/* Hover effect on whole box *\/\n    .contact-box:hover {\n      transform: translateY(-5px);\n      box-shadow: 0px 12px 28px rgba(0,0,0,0.4);\n    }\n\n    .contact-box h2 {\n      text-align: center;\n      margin-bottom: 20px;\n      color: #0072ff;\n    }\n\n    label {\n      font-size: 14px;\n      color: #333;\n      display: block;\n      margin-bottom: 6px;\n    }\n\n    input, textarea {\n      width: 100%;\n      padding: 10px;\n      margin-bottom: 15px;\n      border: 1px solid #ccc;\n      border-radius: 6px;\n      font-size: 14px;\n      transition: 0.3s;\n    }\n\n    \/* Hover effect for input & textarea *\/\n    input:hover, textarea:hover {\n      border-color: #0072ff;\n      box-shadow: 0px 0px 6px #0072ff;\n    }\n\n    textarea {\n      resize: none;\n      height: 100px;\n    }\n\n    button {\n      width: 100%;\n      padding: 12px;\n      border: none;\n      border-radius: 6px;\n      background: linear-gradient(to right, #00c6ff, #0072ff);\n      color: white;\n      font-size: 16px;\n      cursor: pointer;\n      transition: 0.3s;\n    }\n\n    button:hover {\n      background: linear-gradient(to right, #0072ff, #00c6ff);\n      box-shadow: 0px 6px 16px rgba(0,0,0,0.3);\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <div class=\"contact-box\">\n    <h2>Contact Us<\/h2>\n    <form>\n      <label for=\"name\">Full Name<\/label>\n      <input type=\"text\" id=\"name\" placeholder=\"Enter your name\" required>\n\n      <label for=\"email\">Email Address<\/label>\n      <input type=\"email\" id=\"email\" placeholder=\"Enter your email\" required>\n\n      <label for=\"subject\">Subject<\/label>\n      <input type=\"text\" id=\"subject\" placeholder=\"Enter subject\" required>\n\n      <label for=\"message\">Message<\/label>\n      <textarea id=\"message\" placeholder=\"Write your message...\" required><\/textarea>\n\n      <button type=\"submit\">Send Message<\/button>\n    <\/form>\n  <\/div>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Feedback Form<\/span><\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n  <title>Feedback Form<\/title>\n  <style>\n    body {\n      margin: 0;\n      font-family: Arial, sans-serif;\n      background: linear-gradient(135deg, #ff9a9e, #fad0c4);\n      height: 100vh;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n\n    .feedback-box {\n      background: #fff;\n      padding: 25px;\n      width: 420px;\n      border-radius: 12px;\n      box-shadow: 0px 6px 18px rgba(0,0,0,0.3);\n      transition: 0.3s;\n    }\n\n    .feedback-box:hover {\n      transform: translateY(-5px);\n      box-shadow: 0px 12px 28px rgba(0,0,0,0.4);\n    }\n\n    .feedback-box h2 {\n      text-align: center;\n      margin-bottom: 20px;\n      color: #ff4b5c;\n    }\n\n    label {\n      font-size: 14px;\n      color: #333;\n      display: block;\n      margin: 10px 0 6px;\n    }\n\n    input[type=\"text\"], input[type=\"email\"], textarea {\n      width: 100%;\n      padding: 10px;\n      margin-bottom: 15px;\n      border: 1px solid #ccc;\n      border-radius: 6px;\n      font-size: 14px;\n      transition: 0.3s;\n    }\n\n    input:hover, textarea:hover {\n      border-color: #ff4b5c;\n      box-shadow: 0px 0px 6px #ff4b5c;\n    }\n\n    textarea {\n      resize: none;\n      height: 80px;\n    }\n\n    .options {\n      margin: 8px 0;\n    }\n\n    button {\n      width: 100%;\n      padding: 12px;\n      border: none;\n      border-radius: 6px;\n      background: linear-gradient(to right, #ff4b5c, #ff6a88);\n      color: white;\n      font-size: 16px;\n      cursor: pointer;\n      transition: 0.3s;\n    }\n\n    button:hover {\n      background: linear-gradient(to right, #ff6a88, #ff4b5c);\n      box-shadow: 0px 6px 16px rgba(0,0,0,0.3);\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <div class=\"feedback-box\">\n    <h2>Feedback Form<\/h2>\n    <form>\n      <label for=\"name\">Full Name<\/label>\n      <input type=\"text\" id=\"name\" placeholder=\"Enter your name\" required>\n\n      <label for=\"email\">Email Address<\/label>\n      <input type=\"email\" id=\"email\" placeholder=\"Enter your email\" required>\n\n      <label>How do you rate our service?<\/label>\n      <div class=\"options\">\n        <input type=\"radio\" name=\"rating\" value=\"excellent\"> Excellent <br>\n        <input type=\"radio\" name=\"rating\" value=\"good\"> Good <br>\n        <input type=\"radio\" name=\"rating\" value=\"average\"> Average <br>\n        <input type=\"radio\" name=\"rating\" value=\"poor\"> Poor\n      <\/div>\n\n      <label>Which features do you like? (Select all that apply)<\/label>\n      <div class=\"options\">\n        <input type=\"checkbox\" name=\"features\" value=\"design\"> Design <br>\n        <input type=\"checkbox\" name=\"features\" value=\"usability\"> Usability <br>\n        <input type=\"checkbox\" name=\"features\" value=\"performance\"> Performance <br>\n        <input type=\"checkbox\" name=\"features\" value=\"support\"> Support\n      <\/div>\n\n      <label for=\"suggestions\">Any Suggestions?<\/label>\n      <textarea id=\"suggestions\" placeholder=\"Write here...\"><\/textarea>\n\n      <button type=\"submit\">Submit Feedback<\/button>\n    <\/form>\n  <\/div>\n\n<\/body>\n<\/html>\n\n<\/code><\/pre>\n\n\n\n
Student Admission Form<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n  <title>Feedback Form<\/title>\n  <style>\n    body {\n      margin: 0;\n      font-family: Arial, sans-serif;\n      background: linear-gradient(135deg, #ff9a9e, #fad0c4);\n      height: 100vh;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n\n    .feedback-box {\n      background: #fff;\n      padding: 25px;\n      width: 420px;\n      border-radius: 12px;\n      box-shadow: 0px 6px 18px rgba(0,0,0,0.3);\n      transition: 0.3s;\n    }\n\n    .feedback-box:hover {\n      transform: translateY(-5px);\n      box-shadow: 0px 12px 28px rgba(0,0,0,0.4);\n    }\n\n    .feedback-box h2 {\n      text-align: center;\n      margin-bottom: 20px;\n      color: #ff4b5c;\n    }\n\n    label {\n      font-size: 14px;\n      color: #333;\n      display: block;\n      margin: 10px 0 6px;\n    }\n\n    input[type=\"text\"], input[type=\"email\"], textarea {\n      width: 100%;\n      padding: 10px;\n      margin-bottom: 15px;\n      border: 1px solid #ccc;\n      border-radius: 6px;\n      font-size: 14px;\n      transition: 0.3s;\n    }\n\n    input:hover, textarea:hover {\n      border-color: #ff4b5c;\n      box-shadow: 0px 0px 6px #ff4b5c;\n    }\n\n    textarea {\n      resize: none;\n      height: 80px;\n    }\n\n    .options {\n      margin: 8px 0;\n    }\n\n    button {\n      width: 100%;\n      padding: 12px;\n      border: none;\n      border-radius: 6px;\n      background: linear-gradient(to right, #ff4b5c, #ff6a88);\n      color: white;\n      font-size: 16px;\n      cursor: pointer;\n      transition: 0.3s;\n    }\n\n    button:hover {\n      background: linear-gradient(to right, #ff6a88, #ff4b5c);\n      box-shadow: 0px 6px 16px rgba(0,0,0,0.3);\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <div class=\"feedback-box\">\n    <h2>Feedback Form<\/h2>\n    <form>\n      <label for=\"name\">Full Name<\/label>\n      <input type=\"text\" id=\"name\" placeholder=\"Enter your name\" required>\n\n      <label for=\"email\">Email Address<\/label>\n      <input type=\"email\" id=\"email\" placeholder=\"Enter your email\" required>\n\n      <label>How do you rate our service?<\/label>\n      <div class=\"options\">\n        <input type=\"radio\" name=\"rating\" value=\"excellent\"> Excellent <br>\n        <input type=\"radio\" name=\"rating\" value=\"good\"> Good <br>\n        <input type=\"radio\" name=\"rating\" value=\"average\"> Average <br>\n        <input type=\"radio\" name=\"rating\" value=\"poor\"> Poor\n      <\/div>\n\n      <label>Which features do you like? (Select all that apply)<\/label>\n      <div class=\"options\">\n        <input type=\"checkbox\" name=\"features\" value=\"design\"> Design <br>\n        <input type=\"checkbox\" name=\"features\" value=\"usability\"> Usability <br>\n        <input type=\"checkbox\" name=\"features\" value=\"performance\"> Performance <br>\n        <input type=\"checkbox\" name=\"features\" value=\"support\"> Support\n      <\/div>\n\n      <label for=\"suggestions\">Any Suggestions?<\/label>\n      <textarea id=\"suggestions\" placeholder=\"Write here...\"><\/textarea>\n\n      <button type=\"submit\">Submit Feedback<\/button>\n    <\/form>\n  <\/div>\n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
Library Membership<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n  <title>Library Membership Form<\/title>\n  <style>\n    body {\n      margin: 0;\n      font-family: Arial, sans-serif;\n      background: linear-gradient(135deg, #89f7fe, #66a6ff);\n      height: 100vh;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n\n    .library-box {\n      background: #fff;\n      width: 400px;          \/* smaller width *\/\n      border-radius: 12px;\n      overflow: hidden;\n      box-shadow: 0px 8px 22px rgba(0,0,0,0.3);\n      transition: 0.3s;\n    }\n\n    .library-box:hover {\n      transform: translateY(-5px);\n      box-shadow: 0px 12px 28px rgba(0,0,0,0.4);\n    }\n\n    .header {\n      background: linear-gradient(to right, #4facfe, #00f2fe);\n      padding: 12px;\n      text-align: center;\n      color: white;\n      font-size: 18px;\n      font-weight: bold;\n    }\n\n    .form-body {\n      padding: 18px;\n    }\n\n    label {\n      font-size: 13px;\n      color: #333;\n      display: block;\n      margin: 8px 0 4px;\n    }\n\n    input[type=\"text\"], input[type=\"email\"], input[type=\"tel\"], textarea {\n      width: 100%;\n      padding: 8px;\n      margin-bottom: 10px;\n      border: 1px solid #bbb;\n      border-radius: 6px;\n      font-size: 13px;\n      transition: 0.3s;\n    }\n\n    input:hover, textarea:hover {\n      border-color: #0072ff;\n      box-shadow: 0px 0px 6px #0072ff;\n    }\n\n    textarea {\n      resize: none;\n      height: 50px; \/* smaller textarea *\/\n    }\n\n    .options {\n      margin: 5px 0 10px;\n      font-size: 13px;\n    }\n\n    .options input {\n      margin-right: 4px;\n    }\n\n    button {\n      width: 100%;\n      padding: 10px;\n      border: none;\n      border-radius: 6px;\n      background: linear-gradient(to right, #00c6ff, #0072ff);\n      color: white;\n      font-size: 15px;\n      cursor: pointer;\n      transition: 0.3s;\n    }\n\n    button:hover {\n      background: linear-gradient(to right, #0072ff, #00c6ff);\n      box-shadow: 0px 6px 16px rgba(0,0,0,0.3);\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <div class=\"library-box\">\n    <div class=\"header\">Library Membership<\/div>\n    <div class=\"form-body\">\n      <form>\n        <label for=\"id\">Membership ID<\/label>\n        <input type=\"text\" id=\"id\" placeholder=\"Enter ID\" required>\n\n        <label for=\"name\">Full Name<\/label>\n        <input type=\"text\" id=\"name\" placeholder=\"Enter name\" required>\n\n        <label for=\"email\">Email<\/label>\n        <input type=\"email\" id=\"email\" placeholder=\"Enter email\" required>\n\n        <label for=\"phone\">Phone<\/label>\n        <input type=\"tel\" id=\"phone\" placeholder=\"Enter phone\" required>\n\n        <label>Book Preferences<\/label>\n        <div class=\"options\">\n          <input type=\"checkbox\"> Fiction  \n          <input type=\"checkbox\"> Science  \n          <input type=\"checkbox\"> History  \n          <input type=\"checkbox\"> Comics\n        <\/div>\n\n        <button type=\"submit\">Apply<\/button>\n      <\/form>\n    <\/div>\n  <\/div>\n\n<\/body>\n<\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Login Form UI Contact Form Feedback Form Student Admission Form Library Membership<\/p>\n","protected":false},"author":1,"featured_media":2097,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"googlesitekit_rrm_CAow44u0DA:productID":"","footnotes":""},"categories":[205,1],"tags":[],"class_list":["post-2094","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-computer-application","category-uncategorized"],"acf":[],"yoast_head":"\nHTML Form Examples with Source Code for Students - Itxperts<\/title>\n<meta name=\"description\" content=\"Learn HTML form examples with source code for students. Includes Login, Signup, Contact Us, Feedback, Student Admission, and Library Membership forms with CSS design, hover effects, and gradient backgrounds.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Form Examples with Source Code for Students - Itxperts\" \/>\n<meta property=\"og:description\" content=\"Learn HTML form examples with source code for students. Includes Login, Signup, Contact Us, Feedback, Student Admission, and Library Membership forms with CSS design, hover effects, and gradient backgrounds.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/\" \/>\n<meta property=\"og:site_name\" content=\"Itxperts\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/itxperts.co.in\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-15T08:35:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-15T08:36:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itxperts.co.in\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-15-at-1.48.00-PM.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2038\" \/>\n\t<meta property=\"og:image:height\" content=\"1078\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"@mritxperts\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"@mritxperts\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/\"},\"author\":{\"name\":\"@mritxperts\",\"@id\":\"https:\/\/itxperts.co.in\/blog\/#\/schema\/person\/77ad4d47f9f82583ee23e37010a52fc6\"},\"headline\":\"HTML Form Examples with Source Code for Students\",\"datePublished\":\"2025-09-15T08:35:54+00:00\",\"dateModified\":\"2025-09-15T08:36:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/\"},\"wordCount\":20,\"publisher\":{\"@id\":\"https:\/\/itxperts.co.in\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/itxperts.co.in\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-15-at-1.48.00-PM.png\",\"articleSection\":[\"Computer Application\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/\",\"url\":\"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/\",\"name\":\"HTML Form Examples with Source Code for Students - Itxperts\",\"isPartOf\":{\"@id\":\"https:\/\/itxperts.co.in\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/itxperts.co.in\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-15-at-1.48.00-PM.png\",\"datePublished\":\"2025-09-15T08:35:54+00:00\",\"dateModified\":\"2025-09-15T08:36:44+00:00\",\"description\":\"Learn HTML form examples with source code for students. Includes Login, Signup, Contact Us, Feedback, Student Admission, and Library Membership forms with CSS design, hover effects, and gradient backgrounds.\",\"breadcrumb\":{\"@id\":\"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/#primaryimage\",\"url\":\"https:\/\/itxperts.co.in\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-15-at-1.48.00-PM.png\",\"contentUrl\":\"https:\/\/itxperts.co.in\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-15-at-1.48.00-PM.png\",\"width\":2038,\"height\":1078},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/itxperts.co.in\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Form Examples with Source Code for Students\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/itxperts.co.in\/blog\/#website\",\"url\":\"https:\/\/itxperts.co.in\/blog\/\",\"name\":\"Itxperts\",\"description\":\"Leading Website Design Company in Madhya Pradesh\",\"publisher\":{\"@id\":\"https:\/\/itxperts.co.in\/blog\/#organization\"},\"alternateName\":\"Itxperts | Website Development in Madhya Pradesh\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/itxperts.co.in\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/itxperts.co.in\/blog\/#organization\",\"name\":\"Itxperts\",\"alternateName\":\"Leading Website Design Company in Madhya Pradesh \u2013 Itxperts\",\"url\":\"https:\/\/itxperts.co.in\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/itxperts.co.in\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/itxperts.co.in\/blog\/wp-content\/uploads\/2025\/05\/cropped-itxperts_logo.png\",\"contentUrl\":\"https:\/\/itxperts.co.in\/blog\/wp-content\/uploads\/2025\/05\/cropped-itxperts_logo.png\",\"width\":512,\"height\":512,\"caption\":\"Itxperts\"},\"image\":{\"@id\":\"https:\/\/itxperts.co.in\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/itxperts.co.in\",\"https:\/\/www.linkedin.com\/company\/itxpertsshivpuri\/\",\"https:\/\/www.instagram.com\/itxperts.co.in\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/itxperts.co.in\/blog\/#\/schema\/person\/77ad4d47f9f82583ee23e37010a52fc6\",\"name\":\"@mritxperts\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/itxperts.co.in\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/702cffafd84d85872c0d42d33a9fa39140418d7c60a1311a1f8f55b005d0570b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/702cffafd84d85872c0d42d33a9fa39140418d7c60a1311a1f8f55b005d0570b?s=96&d=mm&r=g\",\"caption\":\"@mritxperts\"},\"description\":\"I am a full-stack web developer from India with over 8 years of experience in building dynamic and responsive web solutions. Specializing in both front-end and back-end development, I have a passion for creating seamless digital experiences. When I'm not coding, I enjoy sharing insights and tutorials on the latest web technologies, helping fellow developers stay ahead in the ever-evolving tech landscape.\",\"sameAs\":[\"https:\/\/itxperts.co.in\/blog\"],\"url\":\"https:\/\/itxperts.co.in\/blog\/author\/mritxpertsgmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML Form Examples with Source Code for Students - Itxperts","description":"Learn HTML form examples with source code for students. Includes Login, Signup, Contact Us, Feedback, Student Admission, and Library Membership forms with CSS design, hover effects, and gradient backgrounds.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/","og_locale":"en_US","og_type":"article","og_title":"HTML Form Examples with Source Code for Students - Itxperts","og_description":"Learn HTML form examples with source code for students. Includes Login, Signup, Contact Us, Feedback, Student Admission, and Library Membership forms with CSS design, hover effects, and gradient backgrounds.","og_url":"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/","og_site_name":"Itxperts","article_publisher":"https:\/\/www.facebook.com\/itxperts.co.in","article_published_time":"2025-09-15T08:35:54+00:00","article_modified_time":"2025-09-15T08:36:44+00:00","og_image":[{"width":2038,"height":1078,"url":"https:\/\/itxperts.co.in\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-15-at-1.48.00-PM.png","type":"image\/png"}],"author":"@mritxperts","twitter_card":"summary_large_image","twitter_misc":{"Written by":"@mritxperts","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/#article","isPartOf":{"@id":"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/"},"author":{"name":"@mritxperts","@id":"https:\/\/itxperts.co.in\/blog\/#\/schema\/person\/77ad4d47f9f82583ee23e37010a52fc6"},"headline":"HTML Form Examples with Source Code for Students","datePublished":"2025-09-15T08:35:54+00:00","dateModified":"2025-09-15T08:36:44+00:00","mainEntityOfPage":{"@id":"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/"},"wordCount":20,"publisher":{"@id":"https:\/\/itxperts.co.in\/blog\/#organization"},"image":{"@id":"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/#primaryimage"},"thumbnailUrl":"https:\/\/itxperts.co.in\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-15-at-1.48.00-PM.png","articleSection":["Computer Application"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/","url":"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/","name":"HTML Form Examples with Source Code for Students - Itxperts","isPartOf":{"@id":"https:\/\/itxperts.co.in\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/#primaryimage"},"image":{"@id":"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/#primaryimage"},"thumbnailUrl":"https:\/\/itxperts.co.in\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-15-at-1.48.00-PM.png","datePublished":"2025-09-15T08:35:54+00:00","dateModified":"2025-09-15T08:36:44+00:00","description":"Learn HTML form examples with source code for students. Includes Login, Signup, Contact Us, Feedback, Student Admission, and Library Membership forms with CSS design, hover effects, and gradient backgrounds.","breadcrumb":{"@id":"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/#primaryimage","url":"https:\/\/itxperts.co.in\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-15-at-1.48.00-PM.png","contentUrl":"https:\/\/itxperts.co.in\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-15-at-1.48.00-PM.png","width":2038,"height":1078},{"@type":"BreadcrumbList","@id":"https:\/\/itxperts.co.in\/blog\/html-form-examples-for-students\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/itxperts.co.in\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML Form Examples with Source Code for Students"}]},{"@type":"WebSite","@id":"https:\/\/itxperts.co.in\/blog\/#website","url":"https:\/\/itxperts.co.in\/blog\/","name":"Itxperts","description":"Leading Website Design Company in Madhya Pradesh","publisher":{"@id":"https:\/\/itxperts.co.in\/blog\/#organization"},"alternateName":"Itxperts | Website Development in Madhya Pradesh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itxperts.co.in\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/itxperts.co.in\/blog\/#organization","name":"Itxperts","alternateName":"Leading Website Design Company in Madhya Pradesh \u2013 Itxperts","url":"https:\/\/itxperts.co.in\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/itxperts.co.in\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itxperts.co.in\/blog\/wp-content\/uploads\/2025\/05\/cropped-itxperts_logo.png","contentUrl":"https:\/\/itxperts.co.in\/blog\/wp-content\/uploads\/2025\/05\/cropped-itxperts_logo.png","width":512,"height":512,"caption":"Itxperts"},"image":{"@id":"https:\/\/itxperts.co.in\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/itxperts.co.in","https:\/\/www.linkedin.com\/company\/itxpertsshivpuri\/","https:\/\/www.instagram.com\/itxperts.co.in\/"]},{"@type":"Person","@id":"https:\/\/itxperts.co.in\/blog\/#\/schema\/person\/77ad4d47f9f82583ee23e37010a52fc6","name":"@mritxperts","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/itxperts.co.in\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/702cffafd84d85872c0d42d33a9fa39140418d7c60a1311a1f8f55b005d0570b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/702cffafd84d85872c0d42d33a9fa39140418d7c60a1311a1f8f55b005d0570b?s=96&d=mm&r=g","caption":"@mritxperts"},"description":"I am a full-stack web developer from India with over 8 years of experience in building dynamic and responsive web solutions. Specializing in both front-end and back-end development, I have a passion for creating seamless digital experiences. When I'm not coding, I enjoy sharing insights and tutorials on the latest web technologies, helping fellow developers stay ahead in the ever-evolving tech landscape.","sameAs":["https:\/\/itxperts.co.in\/blog"],"url":"https:\/\/itxperts.co.in\/blog\/author\/mritxpertsgmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/itxperts.co.in\/blog\/wp-json\/wp\/v2\/posts\/2094","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itxperts.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itxperts.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itxperts.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/itxperts.co.in\/blog\/wp-json\/wp\/v2\/comments?post=2094"}],"version-history":[{"count":2,"href":"https:\/\/itxperts.co.in\/blog\/wp-json\/wp\/v2\/posts\/2094\/revisions"}],"predecessor-version":[{"id":2104,"href":"https:\/\/itxperts.co.in\/blog\/wp-json\/wp\/v2\/posts\/2094\/revisions\/2104"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itxperts.co.in\/blog\/wp-json\/wp\/v2\/media\/2097"}],"wp:attachment":[{"href":"https:\/\/itxperts.co.in\/blog\/wp-json\/wp\/v2\/media?parent=2094"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itxperts.co.in\/blog\/wp-json\/wp\/v2\/categories?post=2094"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itxperts.co.in\/blog\/wp-json\/wp\/v2\/tags?post=2094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}