{"id":9349,"date":"2022-11-10T21:56:34","date_gmt":"2022-11-10T21:56:34","guid":{"rendered":"https:\/\/stevepedwards.today\/DebianAdmin\/?p=9349"},"modified":"2023-10-28T20:08:42","modified_gmt":"2023-10-28T19:08:42","slug":"form-validation-types-results-script-and-non-default-web-font-use","status":"publish","type":"post","link":"https:\/\/stevepedwards.today\/DebianAdmin\/form-validation-types-results-script-and-non-default-web-font-use\/","title":{"rendered":"Form Validation Types, Results Script and Non Default Web Font Use"},"content":{"rendered":"
<\/div>\n

<\/path><\/svg><\/i> \"Loading\"<\/p>\n

<\/div>\n

\"\"<\/p>\n

From one of Kyle Cook's YT vids, showing the various types of input forms that can be used in an HTML page and styled with CSS.<\/p>\n

He also includes a results.html page for logging the data to that outputs in text:<\/p>\n

name : Stephen Edwards
\nemail : edwards@hotmail.com
\nage : 150
\ndate : 2022-11-10
\nBanana : on
\nsex : on
\neyeColor : green
\nfile :
\nphone : 0734343450856
\nurl : https:\/\/localhost
\ncolor : #ffffff
\nbio : wannabe programmer dude
\npassword : asdfsaf<\/div>\n

Back to Form<\/a><\/p>\n

HTML:<\/p>\n

<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Form<\/title>\r\n    <link rel=\"stylesheet\" href=\"styles.css\"\/>\r\n<\/head>\r\n<body>\r\n    <div class=\"header-text\">\r\n    <header>Form Validation Types, Results Script and Non Default Web Font Use<\/header>\r\n    <\/div>\r\n\r\n    <section class=\"section\">\r\n        <form action=\"results.html\" method=\"GET\" enctype=\"multipart\/form-data\">\r\n\r\n            <div class=\"name\">\r\n                <label for=\"name\">Name<\/label>\r\n                <input type=\"text\" name=\"name\" id = \"name\" required placeholder=\"User\">\r\n            <\/div>\r\n\r\n            <div class=\"email\">\r\n                <label for=\"email\" class=\"email-text\">Email<\/label>\r\n                <input type=\"email\" name=\"email\" id=\"email\" required placeholder=\"You@email.com\">\r\n            <\/div>\r\n\r\n            <div class=\"age\">\r\n                <label for=\"age\">Age<\/label>\r\n                <input type=\"number\" name=\"age\" id=\"age\" required min=\"1\" max=\"150\" step=\"1\">\r\n            <\/div>\r\n\r\n            <div class=\"date\">\r\n                <label for=\"date\">Date<\/label>\r\n                <input type=\"date\" name=\"date\" id=\"date\" min=\"1950-01-01\">\r\n            <\/div>\r\n            <div class=\"food\">Food Pref\r\n                <label for=\"apple\">Apple<\/label>\r\n                <input type=\"checkbox\" name=\"apple\" id=\"apple\" id=\"apple\">\r\n            <\/div>\r\n\r\n            <div class=\"food\">Food Pref\r\n                <label for=\"apple\">Banana<\/label>\r\n                <input type=\"checkbox\" name=\"Banana\" id=\"Banana\" id=\"Banana\">\r\n            <\/div>\r\n\r\n            <div class=\"sex\">\r\n                <label for=\"male\">Male<\/label>\r\n                <input type=\"radio\" name=\"sex\" id=\"male\" id=\"male\">\r\n            <\/div>\r\n\r\n            <div class=\"sex\">\r\n                <label for=\"female\">Female<\/label>\r\n                <input type=\"radio\" name=\"sex\" id=\"female\" id=\"female\">\r\n            <\/div>\r\n\r\n            <div class=\"eyecolor\">\r\n                <label for=\"eyeColor\">Eye Color<\/label>\r\n                <select name=\"eyeColor\" id=\"eyeColor\" id=\"eyeColor\" >\r\n                <option value=\"green\">green<\/option>\r\n                <option label=\"blue\" value=\"blue\"><\/option>\r\n                <option label=\"brown\" value=\"brown\"><\/option>\r\n            <\/div>\r\n            \r\n            <div class=\"file\">\r\n                <label for=\"file\">File<\/label>\r\n                <input id=\"file\" type=\"file\" name=\"file\">\r\n            <\/div>\r\n\r\n            <div class=\"phone\">\r\n            <label for=\"Phone\">Phone<\/label>\r\n                <input  type=\"tel\" name=\"phone\" id=\"phone\">\r\n            <\/div>\r\n\r\n            <div class=\"url\">\r\n            <label for=\"url\">Website URL<\/label>\r\n                <input  type=\"url\" name=\"url\" id=\"url\">\r\n            <\/div>\r\n            \r\n            <div class=\"fav-color\">\r\n            <label for=\"color\">Fav Color<\/label>\r\n                <input  type=\"color\" name=\"color\" id=\"color\">\r\n            <\/div>\r\n\r\n            <div class=\"biog\">\r\n                <label for=\"bio\">Biog<\/label>\r\n                <textarea id=\"bio\" name=\"bio\"><\/textarea>\r\n            <\/div>\r\n\r\n            <div class=\"password\">\r\n                <label>Password<input type=\"current-password\" name=\"password\"><\/label>\r\n                <button type=\"reset\">Reset<\/button>\r\n                <button type=\"submit\">Submit<\/button>\r\n            <\/div>        \r\n        <\/form>\r\n    <\/section>\r\n<\/body>\r\n<\/html><\/pre>\n
CSS:<\/p>\n
@import url(\"https:\/\/fonts.googleapis.com\/css?family=Metal+Mania\");\r\n\r\n\/* latin - you need both selectors @ff and body for local fontface*\/\r\n@font-face {\r\n    font-family: \"MetalMania-Regular.ttf\";\r\n    font-weight: 400;\r\n    src: url(\"MetalMania-Regular.ttf\");\r\n    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\r\n  }\r\n\r\n* {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\nbody {\r\n    font-family: \"MetalMania-Regular.ttf\";\r\n    background-color: #999;\r\n    \/* color: white; *\/\r\n    \/* text-align: left; *\/\r\n    \r\n}\r\n\r\n.section {\r\n    margin: 40px;\r\n    font-size: 2em;\r\n}\r\n.header-text {\r\n    color: white;\r\n    background-color: #777;\r\n    font-size: 3em;\r\n    \/* when inside the div *\/\r\n    text-align: center;\r\n}\r\n\r\n.name {\r\n    margin: 20px;\r\n}\r\n\r\n.email {\r\n    margin: 20px;\r\n}\r\n\r\n.age {\r\n    margin: 20px;\r\n}\r\n\r\n.date {\r\n    margin: 20px;\r\n}\r\n\r\n.food {\r\n    margin: 20px;\r\n}\r\n\r\n.sex    {\r\n    margin: 20px;\r\n}\r\n\r\n.eyecolor    {\r\n    margin: 20px;\r\n}\r\n\r\n.file    {\r\n    margin: 20px;\r\n}\r\n\r\n.phone    {\r\n    margin: 20px;\r\n}\r\n\r\n.url    {\r\n    margin: 20px;\r\n}\r\n\r\n.fav-color   {\r\n    margin: 20px;\r\n}\r\n\r\n.biog  {\r\n    margin: 20px;\r\n}\r\n\r\n.biog  {\r\n    margin: 20px;\r\n}<\/pre>\n
Results page HTML:<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Results<\/title>\r\n<\/head>\r\n<body>\r\n    <div id=\"results\"><\/div>\r\n    <a href=\"index.html\">Back to Form<\/a>\r\n    <script>\r\n        const resultsList = document.getElementById('results')\r\n        new URLSearchParams(window.location.search).forEach((value, name) => {\r\n            resultsList.append(`${name} : ${value}` )\r\n            resultsList.append(document.createElement('br'))\r\n            })\r\n    <\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
The CSS code required for using non default fonts downloaded from the web is commented out in the CSS - but important to know what selectors are needed for a DL'd, so local font to work, and what the binary looks like if converted in VS Code using \"iconfont-preview\" <\/strong>extension by super-txr:<\/p>\n
@import url(\"https:\/\/fonts.googleapis.com\/css?family=Metal+Mania\");\r\n\r\n\/* latin - you need both selectors @ff and body for local fontface*\/\r\n@font-face {\r\n    font-family: \"MetalMania-Regular.ttf\";\r\n    font-weight: 400;\r\n    src: url(\"MetalMania-Regular.ttf\");\r\n    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\r\n  }\r\n\r\n* {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\nbody {\r\n    font-family: \"MetalMania-Regular.ttf\";\r\n    background-color: #999;\r\n    color: white;\r\n    text-align: left;\r\n}<\/pre>\n
\"\"<\/p>\n
 <\/p>\n
\"\"<\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
<\/path><\/svg><\/i> \"Loading\"<\/p>\n
<\/div>\n
From one of Kyle Cook's YT vids, showing the various types of input forms that can be used in an HTML page and styled with CSS. He also includes a results.html page for logging the data to that outputs in text: name : Stephen Edwards email : edwards@hotmail.com age : 150 date : 2022-11-10 Banana ...\u00a0 Form Validation Types, Results Script and Non Default Web Font Use<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-9349","post","type-post","status-publish","format-standard","hentry","category-post"],"a3_pvc":{"activated":true,"total_views":14,"today_views":0},"_links":{"self":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/comments?post=9349"}],"version-history":[{"count":10,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9349\/revisions"}],"predecessor-version":[{"id":9963,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9349\/revisions\/9963"}],"wp:attachment":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/media?parent=9349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/categories?post=9349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/tags?post=9349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}