Family Tree Form<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n margin: 20px;\n }\n .form-container {\n max-width: 600px;\n margin: auto;\n padding: 20px;\n border: 1px solid #ccc;\n border-radius: 10px;\n background-color: #f9f9f9;\n }\n .form-group {\n margin-bottom: 15px;\n }\n .form-group label {\n display: block;\n margin-bottom: 5px;\n }\n .form-group input {\n width: 100%;\n padding: 8px;\n box-sizing: border-box;\n }\n .form-group select {\n width: 100%;\n padding: 8px;\n box-sizing: border-box;\n }\n .form-group button {\n padding: 10px 20px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n .form-group button:hover {\n background-color: #45a049;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"form-container\">\n <h2>Family Tree Form<\/h2>\n <form>\n <div class=\"form-group\">\n <label for=\"name\">Name:<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"birthdate\">Birth Date:<\/label>\n <input type=\"date\" id=\"birthdate\" name=\"birthdate\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"relationship\">Relationship:<\/label>\n <select id=\"relationship\" name=\"relationship\" required>\n <option value=\"grandfather\">Grandfather<\/option>\n <option value=\"grandmother\">Grandmother<\/option>\n <option value=\"father\">Father<\/option>\n <option value=\"mother\">Mother<\/option>\n <option value=\"uncle\">Uncle<\/option>\n <option value=\"aunt\">Aunt<\/option>\n <option value=\"child\">Child<\/option>\n <option value=\"cousin\">Cousin<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <button type=\"submit\">Add to Family Tree<\/button>\n <\/div>\n <\/form>\n <\/div>\n<\/body>\n<\/html>\n\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n <title>Family Tree<\/title>\n <style>\n .tree ul {\n padding-top: 20px; position: relative;\n transition: all 0.5s;\n -webkit-transition: all 0.5s;\n -moz-transition: all 0.5s;\n }\n\n .tree li {\n float: left; text-align: center;\n list-style-type: none;\n position: relative;\n padding: 20px 5px 0 5px;\n transition: all 0.5s;\n -webkit-transition: all 0.5s;\n -moz-transition: all 0.5s;\n }\n\n .tree li::before, .tree li::after {\n content: '';\n position: absolute; top: 0; right: 50%;\n border-top: 1px solid #ccc;\n width: 50%; height: 20px;\n }\n\n .tree li::after {\n right: auto; left: 50%;\n border-left: 1px solid #ccc;\n }\n\n .tree li:only-child::after, .tree li:only-child::before {\n display: none;\n }\n\n .tree li:only-child { padding-top: 0; }\n\n .tree li:first-child::before, .tree li:last-child::after {\n border: 0 none;\n }\n\n .tree li:last-child::before {\n border-right: 1px solid #ccc;\n border-radius: 0 5px 0 0;\n -webkit-border-radius: 0 5px 0 0;\n -moz-border-radius: 0 5px 0 0;\n }\n\n .tree li:first-child::after {\n border-radius: 5px 0 0 0;\n -webkit-border-radius: 5px 0 0 0;\n -moz-border-radius: 5px 0 0 0;\n }\n\n .tree ul ul::before {\n content: '';\n position: absolute; top: 0; left: 50%;\n border-left: 1px solid #ccc;\n width: 0; height: 20px;\n }\n\n .tree li a {\n border: 1px solid #ccc;\n padding: 5px 10px;\n text-decoration: none;\n color: #666;\n font-family: arial, verdana, tahoma;\n font-size: 11px;\n display: inline-block;\n border-radius: 5px;\n -webkit-border-radius: 5px;\n -moz-border-radius: 5px;\n transition: all 0.5s;\n -webkit-transition: all 0.5s;\n -moz-transition: all 0.5s;\n }\n\n .tree li a:hover, .tree li a:hover+ul li a {\n background: #c8e4f8; color: #000; border: 1px solid #94a0b4;\n }\n\n .tree li a:hover+ul li::after, \n .tree li a:hover+ul li::before, \n .tree li a:hover+ul::before, \n .tree li a:hover+ul ul::before {\n border-color: #94a0b4;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"tree\">\n <ul>\n <li>\n <a href=\"#\">Grandfather<\/a>\n <ul>\n <li>\n <a href=\"#\">Father<\/a>\n <ul>\n <li><a href=\"#\">Child1<\/a><\/li>\n <li><a href=\"#\">Child2<\/a><\/li>\n <li><a href=\"#\">Child3<\/a><\/li>\n <\/ul>\n <\/li>\n <li>\n <a href=\"#\">Uncle<\/a>\n <ul>\n <li><a href=\"#\">Cousin1<\/a><\/li>\n <li><a href=\"#\">Cousin2<\/a><\/li>\n <\/ul>\n <\/li>\n <\/ul>\n <\/li>\n <\/ul>\n <\/div>\n<\/body>\n<\/html>\n\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n <title>Family Tree Form with Image Preview and Delete<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n margin: 20px;\n }\n .form-container {\n max-width: 600px;\n margin: auto;\n padding: 20px;\n border: 1px solid #ccc;\n border-radius: 10px;\n background-color: #f9f9f9;\n }\n .form-group {\n margin-bottom: 15px;\n }\n .form-group label {\n display: block;\n margin-bottom: 5px;\n }\n .form-group input, .form-group select {\n width: 100%;\n padding: 8px;\n box-sizing: border-box;\n }\n .form-group button {\n padding: 10px 20px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n .form-group button:hover {\n background-color: #45a049;\n }\n .form-group img {\n max-width: 100%;\n height: auto;\n margin-top: 10px;\n }\n .preview-container {\n text-align: center;\n position: relative;\n }\n .preview-container img {\n max-width: 200px;\n height: auto;\n border: 1px solid #ccc;\n border-radius: 5px;\n }\n .delete-button {\n position: absolute;\n top: 10px;\n right: 10px;\n background-color: #f44336;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n padding: 5px 10px;\n }\n .delete-button:hover {\n background-color: #d32f2f;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"form-container\">\n <h2>Family Tree Form with Image Preview and Delete<\/h2>\n <form>\n <div class=\"form-group\">\n <label for=\"name\">Name:<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"birthdate\">Birth Date:<\/label>\n <input type=\"date\" id=\"birthdate\" name=\"birthdate\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"relationship\">Relationship:<\/label>\n <select id=\"relationship\" name=\"relationship\" required>\n <option value=\"grandfather\">Grandfather<\/option>\n <option value=\"grandmother\">Grandmother<\/option>\n <option value=\"father\">Father<\/option>\n <option value=\"mother\">Mother<\/option>\n <option value=\"uncle\">Uncle<\/option>\n <option value=\"aunt\">Aunt<\/option>\n <option value=\"child\">Child<\/option>\n <option value=\"cousin\">Cousin<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label for=\"photo\">Upload Photo:<\/label>\n <input type=\"file\" id=\"photo\" name=\"photo\" accept=\"image\/*\" onchange=\"previewImage(event)\">\n <div class=\"preview-container\">\n <img decoding=\"async\" id=\"preview\" src=\"#\" alt=\"Image Preview\" style=\"display: none;\">\n <button type=\"button\" class=\"delete-button\" onclick=\"deleteImage()\" style=\"display: none;\">Delete<\/button>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <button type=\"submit\">Add to Family Tree<\/button>\n <\/div>\n <\/form>\n <\/div>\n\n <script>\n function previewImage(event) {\n var reader = new FileReader();\n reader.onload = function(){\n var output = document.getElementById('preview');\n output.src = reader.result;\n output.style.display = 'block';\n document.querySelector('.delete-button').style.display = 'block';\n };\n reader.readAsDataURL(event.target.files[0]);\n }\n\n function deleteImage() {\n var output = document.getElementById('preview');\n output.src = '#';\n output.style.display = 'none';\n document.getElementById('photo').value = '';\n document.querySelector('.delete-button').style.display = 'none';\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n <title>Accessible Responsive Form<\/title>\n <style>\n * {\n box-sizing: border-box;\n }\n body {\n font-family: Arial, sans-serif;\n margin: 20px;\n }\n .form-container {\n display: flex;\n flex-direction: column;\n max-width: 600px;\n margin: auto;\n padding: 20px;\n border: 1px solid #ccc;\n border-radius: 10px;\n background-color: #f9f9f9;\n }\n .form-group {\n display: flex;\n flex-direction: column;\n margin-bottom: 15px;\n }\n .form-group label {\n margin-bottom: 5px;\n }\n .form-group input, .form-group select {\n padding: 8px;\n border: 1px solid #ccc;\n border-radius: 5px;\n width: 100%;\n }\n .form-group input:focus, .form-group select:focus {\n border-color: #4CAF50;\n outline: none;\n }\n .form-group button {\n padding: 10px 20px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n .form-group button:hover {\n background-color: #45a049;\n }\n .preview-container img {\n max-width: 200px;\n height: auto;\n border: 1px solid #ccc;\n border-radius: 5px;\n margin: 10px;\n }\n @media (max-width: 600px) {\n .form-container {\n padding: 10px;\n }\n .form-group {\n flex-direction: column;\n }\n .form-group input, .form-group select {\n width: 100%;\n }\n .form-group button {\n width: 100%;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"form-container\">\n <h2>Accessible Responsive Form<\/h2>\n <form id=\"familyTreeForm\">\n <fieldset>\n <legend>Personal Information<\/legend>\n <div class=\"form-group\">\n <label for=\"relationship\">Relationship:<\/label>\n <select id=\"relationship\" name=\"relationship\" required onchange=\"checkRelationship()\">\n <option value=\"\">Select Relationship<\/option>\n <option value=\"greatgrandparent\">Great Grandparent<\/option>\n <option value=\"grandfather\">Grandfather<\/option>\n <option value=\"grandmother\">Grandmother<\/option>\n <option value=\"father\">Father<\/option>\n <option value=\"mother\">Mother<\/option>\n <option value=\"uncle\">Uncle<\/option>\n <option value=\"aunt\">Aunt<\/option>\n <option value=\"child\">Child<\/option>\n <option value=\"cousin\">Cousin<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label for=\"name\">First Name:<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" required aria-required=\"true\" aria-label=\"First Name\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"lastname\">Last Name:<\/label>\n <input type=\"text\" id=\"lastname\" name=\"lastname\" required aria-required=\"true\" aria-label=\"Last Name\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"familyname\">Family Name:<\/label>\n <input type=\"text\" id=\"familyname\" name=\"familyname\" aria-label=\"Family Name\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"birthdate\">Birth Date:<\/label>\n <input type=\"date\" id=\"birthdate\" name=\"birthdate\" required aria-required=\"true\" aria-label=\"Birth Date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"photo\">Upload Photos:<\/label>\n <input type=\"file\" id=\"photo\" name=\"photo\" accept=\"image\/*\" multiple onchange=\"previewImages(event)\" aria-label=\"Upload Photos\">\n <div class=\"preview-container\" id=\"preview-container\"><\/div>\n <\/div>\n <\/fieldset>\n <div class=\"form-group\">\n <button type=\"submit\">Add to Family Tree<\/button>\n <\/div>\n <\/form>\n <\/div>\n\n <script>\n function checkRelationship() {\n var relationship = document.getElementById('relationship').value;\n var familyNameField = document.getElementById('familyname');\n var photoField = document.getElementById('photo');\n\n \/\/ Reset required attributes\n familyNameField.required = false;\n photoField.required = false;\n\n \/\/ Set required attributes based on conditions\n if (relationship === 'greatgrandparent' || relationship === 'grandfather' || relationship === 'grandmother') {\n familyNameField.required = true;\n }\n\n if (relationship === 'father' || relationship === 'mother') {\n photoField.required = true;\n }\n }\n\n function previewImages(event) {\n var files = event.target.files;\n var previewContainer = document.getElementById('preview-container');\n previewContainer.innerHTML = ''; \/\/ Clear previous previews\n\n for (var i = 0; i < files.length; i++) {\n var file = files[i];\n var reader = new FileReader();\n reader.onload = function(e) {\n var img = document.createElement('img');\n img.src = e.target.result;\n previewContainer.appendChild(img);\n };\n reader.readAsDataURL(file);\n }\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n <title>Extended Family Tree Form<\/title>\n <style>\n * {\n box-sizing: border-box;\n }\n body {\n font-family: Arial, sans-serif;\n margin: 20px;\n }\n .form-container {\n display: flex;\n flex-direction: column;\n max-width: 600px;\n margin: auto;\n padding: 20px;\n border: 1px solid #ccc;\n border-radius: 10px;\n background-color: #f9f9f9;\n }\n .form-group {\n display: flex;\n flex-direction: column;\n margin-bottom: 15px;\n }\n .form-group label {\n margin-bottom: 5px;\n }\n .form-group input, .form-group select {\n padding: 8px;\n border: 1px solid #ccc;\n border-radius: 5px;\n width: 100%;\n }\n .form-group input:focus, .form-group select:focus {\n border-color: #4CAF50;\n outline: none;\n }\n .form-group button {\n padding: 10px 20px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n .form-group button:hover {\n background-color: #45a049;\n }\n .preview-container img {\n max-width: 200px;\n height: auto;\n border: 1px solid #ccc;\n border-radius: 5px;\n margin: 10px;\n }\n @media (max-width: 600px) {\n .form-container {\n padding: 10px;\n }\n .form-group {\n flex-direction: column;\n }\n .form-group input, .form-group select {\n width: 100%;\n }\n .form-group button {\n width: 100%;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"form-container\">\n <h2>Extended Family Tree Form<\/h2>\n <form id=\"familyTreeForm\">\n <fieldset>\n <legend>Personal Information<\/legend>\n <div class=\"form-group\">\n <label for=\"relationship\">Relationship:<\/label>\n <select id=\"relationship\" name=\"relationship\" required onchange=\"checkRelationship()\">\n <option value=\"\">Select Relationship<\/option>\n <option value=\"greatgrandparent\">Great Grandparent<\/option>\n <option value=\"grandfather\">Grandfather<\/option>\n <option value=\"grandmother\">Grandmother<\/option>\n <option value=\"father\">Father<\/option>\n <option value=\"mother\">Mother<\/option>\n <option value=\"uncle\">Uncle<\/option>\n <option value=\"aunt\">Aunt<\/option>\n <option value=\"child\">Child<\/option>\n <option value=\"cousin\">Cousin<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label for=\"name\">First Name:<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" required aria-required=\"true\" aria-label=\"First Name\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"middlename\">Middle Name:<\/label>\n <input type=\"text\" id=\"middlename\" name=\"middlename\" aria-label=\"Middle Name\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"lastname\">Last Name:<\/label>\n <input type=\"text\" id=\"lastname\" name=\"lastname\" required aria-required=\"true\" aria-label=\"Last Name\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"familyname\">Family Name:<\/label>\n <input type=\"text\" id=\"familyname\" name=\"familyname\" aria-label=\"Family Name\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"email\">Email:<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" aria-label=\"Email\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"phone\">Phone Number:<\/label>\n <input type=\"tel\" id=\"phone\" name=\"phone\" aria-label=\"Phone Number\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"birthdate\">Birth Date:<\/label>\n <input type=\"date\" id=\"birthdate\" name=\"birthdate\" required aria-required=\"true\" aria-label=\"Birth Date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"photo\">Upload Photos:<\/label>\n <input type=\"file\" id=\"photo\" name=\"photo\" accept=\"image\/*\" multiple onchange=\"previewImages(event)\" aria-label=\"Upload Photos\">\n <div class=\"preview-container\" id=\"preview-container\"><\/div>\n <\/div>\n <\/fieldset>\n <div class=\"form-group\">\n <button type=\"submit\">Add to Family Tree<\/button>\n <\/div>\n <\/form>\n <\/div>\n\n <script>\n function checkRelationship() {\n var relationship = document.getElementById('relationship').value;\n var familyNameField = document.getElementById('familyname');\n var photoField = document.getElementById('photo');\n\n \/\/ Reset required attributes\n familyNameField.required = false;\n photoField.required = false;\n\n \/\/ Set required attributes based on conditions\n if (relationship === 'greatgrandparent' || relationship === 'grandfather' || relationship === 'grandmother') {\n familyNameField.required = true;\n }\n\n if (relationship === 'father' || relationship === 'mother') {\n photoField.required = true;\n }\n }\n\n function previewImages(event) {\n var files = event.target.files;\n var previewContainer = document.getElementById('preview-container');\n previewContainer.innerHTML = ''; \/\/ Clear previous previews\n\n for (var i = 0; i < files.length; i++) {\n var file = files[i];\n var reader = new FileReader();\n reader.onload = function(e) {\n var img = document.createElement('img');\n img.src = e.target.result;\n previewContainer.appendChild(img);\n };\n reader.readAsDataURL(file);\n }\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<div class=\"components-placeholder\"><div class=\"notice notice-error\"><strong>RSS Error:<\/strong> WP HTTP Error: A valid URL was not provided.<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Family Tree Form Family Tree Form Name: Birth Date: Relationship: GrandfatherGrandmotherFatherMotherUncleAuntChildCousin Add to Family Tree Family Tree Grandfather Father Child1 Child2 Child3 Uncle Cousin1 Cousin2 Family Tree Form with Image Preview and Delete Family Tree Form with Image Preview and Delete Name: Birth Date: Relationship: GrandfatherGrandmotherFatherMotherUncleAuntChildCousin Upload Photo: Delete Add to Family Tree Accessible Responsive […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"_links":{"self":[{"href":"https:\/\/wiki.milletify.com\/index.php\/wp-json\/wp\/v2\/pages\/435"}],"collection":[{"href":"https:\/\/wiki.milletify.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wiki.milletify.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wiki.milletify.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wiki.milletify.com\/index.php\/wp-json\/wp\/v2\/comments?post=435"}],"version-history":[{"count":5,"href":"https:\/\/wiki.milletify.com\/index.php\/wp-json\/wp\/v2\/pages\/435\/revisions"}],"predecessor-version":[{"id":440,"href":"https:\/\/wiki.milletify.com\/index.php\/wp-json\/wp\/v2\/pages\/435\/revisions\/440"}],"wp:attachment":[{"href":"https:\/\/wiki.milletify.com\/index.php\/wp-json\/wp\/v2\/media?parent=435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":435,"date":"2024-08-14T18:49:32","date_gmt":"2024-08-14T18:49:32","guid":{"rendered":"https:\/\/wiki.milletify.com\/?page_id=435"},"modified":"2024-08-14T18:49:33","modified_gmt":"2024-08-14T18:49:33","slug":"family-tree","status":"publish","type":"page","link":"https:\/\/wiki.milletify.com\/index.php\/family-tree\/","title":{"rendered":"Family Tree"},"content":{"rendered":"\n\n\n\n Family Tree Form<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n margin: 20px;\n }\n .form-container {\n max-width: 600px;\n margin: auto;\n padding: 20px;\n border: 1px solid #ccc;\n border-radius: 10px;\n background-color: #f9f9f9;\n }\n .form-group {\n margin-bottom: 15px;\n }\n .form-group label {\n display: block;\n margin-bottom: 5px;\n }\n .form-group input {\n width: 100%;\n padding: 8px;\n box-sizing: border-box;\n }\n .form-group select {\n width: 100%;\n padding: 8px;\n box-sizing: border-box;\n }\n .form-group button {\n padding: 10px 20px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n .form-group button:hover {\n background-color: #45a049;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"form-container\">\n <h2>Family Tree Form<\/h2>\n <form>\n <div class=\"form-group\">\n <label for=\"name\">Name:<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"birthdate\">Birth Date:<\/label>\n <input type=\"date\" id=\"birthdate\" name=\"birthdate\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"relationship\">Relationship:<\/label>\n <select id=\"relationship\" name=\"relationship\" required>\n <option value=\"grandfather\">Grandfather<\/option>\n <option value=\"grandmother\">Grandmother<\/option>\n <option value=\"father\">Father<\/option>\n <option value=\"mother\">Mother<\/option>\n <option value=\"uncle\">Uncle<\/option>\n <option value=\"aunt\">Aunt<\/option>\n <option value=\"child\">Child<\/option>\n <option value=\"cousin\">Cousin<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <button type=\"submit\">Add to Family Tree<\/button>\n <\/div>\n <\/form>\n <\/div>\n<\/body>\n<\/html>\n\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n <title>Family Tree<\/title>\n <style>\n .tree ul {\n padding-top: 20px; position: relative;\n transition: all 0.5s;\n -webkit-transition: all 0.5s;\n -moz-transition: all 0.5s;\n }\n\n .tree li {\n float: left; text-align: center;\n list-style-type: none;\n position: relative;\n padding: 20px 5px 0 5px;\n transition: all 0.5s;\n -webkit-transition: all 0.5s;\n -moz-transition: all 0.5s;\n }\n\n .tree li::before, .tree li::after {\n content: '';\n position: absolute; top: 0; right: 50%;\n border-top: 1px solid #ccc;\n width: 50%; height: 20px;\n }\n\n .tree li::after {\n right: auto; left: 50%;\n border-left: 1px solid #ccc;\n }\n\n .tree li:only-child::after, .tree li:only-child::before {\n display: none;\n }\n\n .tree li:only-child { padding-top: 0; }\n\n .tree li:first-child::before, .tree li:last-child::after {\n border: 0 none;\n }\n\n .tree li:last-child::before {\n border-right: 1px solid #ccc;\n border-radius: 0 5px 0 0;\n -webkit-border-radius: 0 5px 0 0;\n -moz-border-radius: 0 5px 0 0;\n }\n\n .tree li:first-child::after {\n border-radius: 5px 0 0 0;\n -webkit-border-radius: 5px 0 0 0;\n -moz-border-radius: 5px 0 0 0;\n }\n\n .tree ul ul::before {\n content: '';\n position: absolute; top: 0; left: 50%;\n border-left: 1px solid #ccc;\n width: 0; height: 20px;\n }\n\n .tree li a {\n border: 1px solid #ccc;\n padding: 5px 10px;\n text-decoration: none;\n color: #666;\n font-family: arial, verdana, tahoma;\n font-size: 11px;\n display: inline-block;\n border-radius: 5px;\n -webkit-border-radius: 5px;\n -moz-border-radius: 5px;\n transition: all 0.5s;\n -webkit-transition: all 0.5s;\n -moz-transition: all 0.5s;\n }\n\n .tree li a:hover, .tree li a:hover+ul li a {\n background: #c8e4f8; color: #000; border: 1px solid #94a0b4;\n }\n\n .tree li a:hover+ul li::after, \n .tree li a:hover+ul li::before, \n .tree li a:hover+ul::before, \n .tree li a:hover+ul ul::before {\n border-color: #94a0b4;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"tree\">\n <ul>\n <li>\n <a href=\"#\">Grandfather<\/a>\n <ul>\n <li>\n <a href=\"#\">Father<\/a>\n <ul>\n <li><a href=\"#\">Child1<\/a><\/li>\n <li><a href=\"#\">Child2<\/a><\/li>\n <li><a href=\"#\">Child3<\/a><\/li>\n <\/ul>\n <\/li>\n <li>\n <a href=\"#\">Uncle<\/a>\n <ul>\n <li><a href=\"#\">Cousin1<\/a><\/li>\n <li><a href=\"#\">Cousin2<\/a><\/li>\n <\/ul>\n <\/li>\n <\/ul>\n <\/li>\n <\/ul>\n <\/div>\n<\/body>\n<\/html>\n\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n <title>Family Tree Form with Image Preview and Delete<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n margin: 20px;\n }\n .form-container {\n max-width: 600px;\n margin: auto;\n padding: 20px;\n border: 1px solid #ccc;\n border-radius: 10px;\n background-color: #f9f9f9;\n }\n .form-group {\n margin-bottom: 15px;\n }\n .form-group label {\n display: block;\n margin-bottom: 5px;\n }\n .form-group input, .form-group select {\n width: 100%;\n padding: 8px;\n box-sizing: border-box;\n }\n .form-group button {\n padding: 10px 20px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n .form-group button:hover {\n background-color: #45a049;\n }\n .form-group img {\n max-width: 100%;\n height: auto;\n margin-top: 10px;\n }\n .preview-container {\n text-align: center;\n position: relative;\n }\n .preview-container img {\n max-width: 200px;\n height: auto;\n border: 1px solid #ccc;\n border-radius: 5px;\n }\n .delete-button {\n position: absolute;\n top: 10px;\n right: 10px;\n background-color: #f44336;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n padding: 5px 10px;\n }\n .delete-button:hover {\n background-color: #d32f2f;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"form-container\">\n <h2>Family Tree Form with Image Preview and Delete<\/h2>\n <form>\n <div class=\"form-group\">\n <label for=\"name\">Name:<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"birthdate\">Birth Date:<\/label>\n <input type=\"date\" id=\"birthdate\" name=\"birthdate\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"relationship\">Relationship:<\/label>\n <select id=\"relationship\" name=\"relationship\" required>\n <option value=\"grandfather\">Grandfather<\/option>\n <option value=\"grandmother\">Grandmother<\/option>\n <option value=\"father\">Father<\/option>\n <option value=\"mother\">Mother<\/option>\n <option value=\"uncle\">Uncle<\/option>\n <option value=\"aunt\">Aunt<\/option>\n <option value=\"child\">Child<\/option>\n <option value=\"cousin\">Cousin<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label for=\"photo\">Upload Photo:<\/label>\n <input type=\"file\" id=\"photo\" name=\"photo\" accept=\"image\/*\" onchange=\"previewImage(event)\">\n <div class=\"preview-container\">\n <img decoding=\"async\" id=\"preview\" src=\"#\" alt=\"Image Preview\" style=\"display: none;\">\n <button type=\"button\" class=\"delete-button\" onclick=\"deleteImage()\" style=\"display: none;\">Delete<\/button>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <button type=\"submit\">Add to Family Tree<\/button>\n <\/div>\n <\/form>\n <\/div>\n\n <script>\n function previewImage(event) {\n var reader = new FileReader();\n reader.onload = function(){\n var output = document.getElementById('preview');\n output.src = reader.result;\n output.style.display = 'block';\n document.querySelector('.delete-button').style.display = 'block';\n };\n reader.readAsDataURL(event.target.files[0]);\n }\n\n function deleteImage() {\n var output = document.getElementById('preview');\n output.src = '#';\n output.style.display = 'none';\n document.getElementById('photo').value = '';\n document.querySelector('.delete-button').style.display = 'none';\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n <title>Accessible Responsive Form<\/title>\n <style>\n * {\n box-sizing: border-box;\n }\n body {\n font-family: Arial, sans-serif;\n margin: 20px;\n }\n .form-container {\n display: flex;\n flex-direction: column;\n max-width: 600px;\n margin: auto;\n padding: 20px;\n border: 1px solid #ccc;\n border-radius: 10px;\n background-color: #f9f9f9;\n }\n .form-group {\n display: flex;\n flex-direction: column;\n margin-bottom: 15px;\n }\n .form-group label {\n margin-bottom: 5px;\n }\n .form-group input, .form-group select {\n padding: 8px;\n border: 1px solid #ccc;\n border-radius: 5px;\n width: 100%;\n }\n .form-group input:focus, .form-group select:focus {\n border-color: #4CAF50;\n outline: none;\n }\n .form-group button {\n padding: 10px 20px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n .form-group button:hover {\n background-color: #45a049;\n }\n .preview-container img {\n max-width: 200px;\n height: auto;\n border: 1px solid #ccc;\n border-radius: 5px;\n margin: 10px;\n }\n @media (max-width: 600px) {\n .form-container {\n padding: 10px;\n }\n .form-group {\n flex-direction: column;\n }\n .form-group input, .form-group select {\n width: 100%;\n }\n .form-group button {\n width: 100%;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"form-container\">\n <h2>Accessible Responsive Form<\/h2>\n <form id=\"familyTreeForm\">\n <fieldset>\n <legend>Personal Information<\/legend>\n <div class=\"form-group\">\n <label for=\"relationship\">Relationship:<\/label>\n <select id=\"relationship\" name=\"relationship\" required onchange=\"checkRelationship()\">\n <option value=\"\">Select Relationship<\/option>\n <option value=\"greatgrandparent\">Great Grandparent<\/option>\n <option value=\"grandfather\">Grandfather<\/option>\n <option value=\"grandmother\">Grandmother<\/option>\n <option value=\"father\">Father<\/option>\n <option value=\"mother\">Mother<\/option>\n <option value=\"uncle\">Uncle<\/option>\n <option value=\"aunt\">Aunt<\/option>\n <option value=\"child\">Child<\/option>\n <option value=\"cousin\">Cousin<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label for=\"name\">First Name:<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" required aria-required=\"true\" aria-label=\"First Name\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"lastname\">Last Name:<\/label>\n <input type=\"text\" id=\"lastname\" name=\"lastname\" required aria-required=\"true\" aria-label=\"Last Name\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"familyname\">Family Name:<\/label>\n <input type=\"text\" id=\"familyname\" name=\"familyname\" aria-label=\"Family Name\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"birthdate\">Birth Date:<\/label>\n <input type=\"date\" id=\"birthdate\" name=\"birthdate\" required aria-required=\"true\" aria-label=\"Birth Date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"photo\">Upload Photos:<\/label>\n <input type=\"file\" id=\"photo\" name=\"photo\" accept=\"image\/*\" multiple onchange=\"previewImages(event)\" aria-label=\"Upload Photos\">\n <div class=\"preview-container\" id=\"preview-container\"><\/div>\n <\/div>\n <\/fieldset>\n <div class=\"form-group\">\n <button type=\"submit\">Add to Family Tree<\/button>\n <\/div>\n <\/form>\n <\/div>\n\n <script>\n function checkRelationship() {\n var relationship = document.getElementById('relationship').value;\n var familyNameField = document.getElementById('familyname');\n var photoField = document.getElementById('photo');\n\n \/\/ Reset required attributes\n familyNameField.required = false;\n photoField.required = false;\n\n \/\/ Set required attributes based on conditions\n if (relationship === 'greatgrandparent' || relationship === 'grandfather' || relationship === 'grandmother') {\n familyNameField.required = true;\n }\n\n if (relationship === 'father' || relationship === 'mother') {\n photoField.required = true;\n }\n }\n\n function previewImages(event) {\n var files = event.target.files;\n var previewContainer = document.getElementById('preview-container');\n previewContainer.innerHTML = ''; \/\/ Clear previous previews\n\n for (var i = 0; i < files.length; i++) {\n var file = files[i];\n var reader = new FileReader();\n reader.onload = function(e) {\n var img = document.createElement('img');\n img.src = e.target.result;\n previewContainer.appendChild(img);\n };\n reader.readAsDataURL(file);\n }\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n <title>Extended Family Tree Form<\/title>\n <style>\n * {\n box-sizing: border-box;\n }\n body {\n font-family: Arial, sans-serif;\n margin: 20px;\n }\n .form-container {\n display: flex;\n flex-direction: column;\n max-width: 600px;\n margin: auto;\n padding: 20px;\n border: 1px solid #ccc;\n border-radius: 10px;\n background-color: #f9f9f9;\n }\n .form-group {\n display: flex;\n flex-direction: column;\n margin-bottom: 15px;\n }\n .form-group label {\n margin-bottom: 5px;\n }\n .form-group input, .form-group select {\n padding: 8px;\n border: 1px solid #ccc;\n border-radius: 5px;\n width: 100%;\n }\n .form-group input:focus, .form-group select:focus {\n border-color: #4CAF50;\n outline: none;\n }\n .form-group button {\n padding: 10px 20px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n .form-group button:hover {\n background-color: #45a049;\n }\n .preview-container img {\n max-width: 200px;\n height: auto;\n border: 1px solid #ccc;\n border-radius: 5px;\n margin: 10px;\n }\n @media (max-width: 600px) {\n .form-container {\n padding: 10px;\n }\n .form-group {\n flex-direction: column;\n }\n .form-group input, .form-group select {\n width: 100%;\n }\n .form-group button {\n width: 100%;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"form-container\">\n <h2>Extended Family Tree Form<\/h2>\n <form id=\"familyTreeForm\">\n <fieldset>\n <legend>Personal Information<\/legend>\n <div class=\"form-group\">\n <label for=\"relationship\">Relationship:<\/label>\n <select id=\"relationship\" name=\"relationship\" required onchange=\"checkRelationship()\">\n <option value=\"\">Select Relationship<\/option>\n <option value=\"greatgrandparent\">Great Grandparent<\/option>\n <option value=\"grandfather\">Grandfather<\/option>\n <option value=\"grandmother\">Grandmother<\/option>\n <option value=\"father\">Father<\/option>\n <option value=\"mother\">Mother<\/option>\n <option value=\"uncle\">Uncle<\/option>\n <option value=\"aunt\">Aunt<\/option>\n <option value=\"child\">Child<\/option>\n <option value=\"cousin\">Cousin<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label for=\"name\">First Name:<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" required aria-required=\"true\" aria-label=\"First Name\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"middlename\">Middle Name:<\/label>\n <input type=\"text\" id=\"middlename\" name=\"middlename\" aria-label=\"Middle Name\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"lastname\">Last Name:<\/label>\n <input type=\"text\" id=\"lastname\" name=\"lastname\" required aria-required=\"true\" aria-label=\"Last Name\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"familyname\">Family Name:<\/label>\n <input type=\"text\" id=\"familyname\" name=\"familyname\" aria-label=\"Family Name\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"email\">Email:<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" aria-label=\"Email\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"phone\">Phone Number:<\/label>\n <input type=\"tel\" id=\"phone\" name=\"phone\" aria-label=\"Phone Number\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"birthdate\">Birth Date:<\/label>\n <input type=\"date\" id=\"birthdate\" name=\"birthdate\" required aria-required=\"true\" aria-label=\"Birth Date\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"photo\">Upload Photos:<\/label>\n <input type=\"file\" id=\"photo\" name=\"photo\" accept=\"image\/*\" multiple onchange=\"previewImages(event)\" aria-label=\"Upload Photos\">\n <div class=\"preview-container\" id=\"preview-container\"><\/div>\n <\/div>\n <\/fieldset>\n <div class=\"form-group\">\n <button type=\"submit\">Add to Family Tree<\/button>\n <\/div>\n <\/form>\n <\/div>\n\n <script>\n function checkRelationship() {\n var relationship = document.getElementById('relationship').value;\n var familyNameField = document.getElementById('familyname');\n var photoField = document.getElementById('photo');\n\n \/\/ Reset required attributes\n familyNameField.required = false;\n photoField.required = false;\n\n \/\/ Set required attributes based on conditions\n if (relationship === 'greatgrandparent' || relationship === 'grandfather' || relationship === 'grandmother') {\n familyNameField.required = true;\n }\n\n if (relationship === 'father' || relationship === 'mother') {\n photoField.required = true;\n }\n }\n\n function previewImages(event) {\n var files = event.target.files;\n var previewContainer = document.getElementById('preview-container');\n previewContainer.innerHTML = ''; \/\/ Clear previous previews\n\n for (var i = 0; i < files.length; i++) {\n var file = files[i];\n var reader = new FileReader();\n reader.onload = function(e) {\n var img = document.createElement('img');\n img.src = e.target.result;\n previewContainer.appendChild(img);\n };\n reader.readAsDataURL(file);\n }\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<div class=\"components-placeholder\"><div class=\"notice notice-error\"><strong>RSS Error:<\/strong> WP HTTP Error: A valid URL was not provided.<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Family Tree Form Family Tree Form Name: Birth Date: Relationship: GrandfatherGrandmotherFatherMotherUncleAuntChildCousin Add to Family Tree Family Tree Grandfather Father Child1 Child2 Child3 Uncle Cousin1 Cousin2 Family Tree Form with Image Preview and Delete Family Tree Form with Image Preview and Delete Name: Birth Date: Relationship: GrandfatherGrandmotherFatherMotherUncleAuntChildCousin Upload Photo: Delete Add to Family Tree Accessible Responsive […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"_links":{"self":[{"href":"https:\/\/wiki.milletify.com\/index.php\/wp-json\/wp\/v2\/pages\/435"}],"collection":[{"href":"https:\/\/wiki.milletify.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wiki.milletify.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wiki.milletify.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wiki.milletify.com\/index.php\/wp-json\/wp\/v2\/comments?post=435"}],"version-history":[{"count":5,"href":"https:\/\/wiki.milletify.com\/index.php\/wp-json\/wp\/v2\/pages\/435\/revisions"}],"predecessor-version":[{"id":440,"href":"https:\/\/wiki.milletify.com\/index.php\/wp-json\/wp\/v2\/pages\/435\/revisions\/440"}],"wp:attachment":[{"href":"https:\/\/wiki.milletify.com\/index.php\/wp-json\/wp\/v2\/media?parent=435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}