-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact-form.html
98 lines (94 loc) · 6.09 KB
/
contact-form.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en-GB" xml:lang="en-GB" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Contact Form | GTx HDM1.2aX</title>
<link rel="stylesheet" type="text/css" media="screen" href="./css/gtx_hdm12ax.css" title="Default style" id="rel-css-default" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/black-on-white.css" title="Black on white (high contrast)" id="rel-css-black-on-white" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/white-on-black.css" title="White on black (high contrast)" id="rel-css-white-on-black" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/yellow-on-black.css" title="Yellow on black (high contrast)" id="rel-css-yellow-on-black" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/lime-on-black.css" title="Lime on black (high contrast)" id="rel-css-lime-on-black" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/brown-on-buff.css" title="Brown on buff (low contrast)" id="rel-css-brown-on-buff" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/systemcolours.css" title="System colours" id="rel-css-system-colours" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/nocolours.css" title="‘No colours’" id="rel-css-no-colours" />
<meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<meta name="author" content="Christophe Strobbe" />
</head>
<body id="error404">
<header>
<h1><span class="h1txt">Contact Form</span></h1>
<p class="skiplink"><a class="skiplink" href="#main">Skip to main content</a></p>
</header>
<nav>
<h2>Site Navigation</h2>
<ul>
<li><a href="index.html" rel="home">Home</a></li>
<li><a href="accessibility-usability.html">Accessibility and Usability</a></li>
<li><a href="what-is-web-accessibility.html" title="What Is Web Accessibility and Why Is It Important?">Web Accessibility</a></li>
<li><a href="browser-features.html">Browser Features</a></li>
<li><a href="gpii-common-terms.html"><abbr>GPII</abbr> Common Terms</a></li>
<li><a href="glossary.html" rel="glossary"><abbr>ICT</abbr> Accessibility Glossary</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</nav>
<main id="main">
<p>This form exists for instructional purposes only. It does not submit any data to a server that would process these data.
Since the form sends an
<a href="https://www.w3schools.com/tags/ref_httpmethods.asp"><abbr>HTTP</abbr> POST request</a>
to itself, <abbr>i.e.</abbr> to a static <abbr>HTML</abbr> page, submitted data are simply lost.
</p>
<form accept-charset="UTF-8" action="contact-form.html" autocomplete="off" enctype="text/plain" method="post" name="contactform" id="contactform">
<fieldset>
<legend>Your details</legend>
<p><label for="name" class="forinput">Name: </label> <input id="name" name="name" type="text" minlength="2" maxlength="100" size="40" /><span class="input-validation"></span></p>
<p><label for="mail" class="forinput">E-mail (required): </label> <input id="mail" name="mail" type="email" minlength="6" maxlength="100" size="40" required="required" /><span class="input-validation"></span></p>
<p><label for="phon" class="forinput">Phone: </label> <input id="phon" name="phon" type="tel" minlength="6" maxlength="50" size="40" /><span class="input-validation"></span></p>
</fieldset>
<div class="fieldset">
<p><label for="subject" class="forinput">Subject: </label> <input id="subject" name="subject" type="text" minlength="0" maxlength="50" size="40" />
</p>
<p><label for="category" class="forselect">Category: </label>
<select id="category" name="category">
<option value="cs">Customer service</option>
<option value="orders">Orders</option>
<option value="events">Event enquiries</option>
<option value="feedback">Website feedback</option>
<option value="other">Other</option>
</select>
</p>
<p><label for="message" class="fortextarea">Message: </label>
<textarea cols="70" rows="10" id="message" name="message"></textarea>
</p>
</div>
<div class="fieldset buttons">
<p>
<button type="submit" id="contact-submit-button">Submit form</button>
<!--
<button type="submit" disabled="disabled">Submit form</button>
<button type="reset" id="contact-clear-button" disabled="disabled">Clear form</button>
-->
</p>
</div>
</form>
<!--
<div>
<form action="https://duckduckgo.com/" method="GET" name="x" target="_blank">
<label for="q">DuckDuckGo: </label> <input type="text" name="q" id="q" autocomplete="off" />
<button type="submit">Search…</button>
</form>
</div>
-->
</main>
<footer>
<p id="licence">
<a rel="license" href="https://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="./img/cc_by_4.0_88x31.png" /></a><br />
<strong>Example Site for GTx_HDM1.2aX</strong> by <a href="https://github.com/REMEXLabs"><abbr>HdM</abbr> REMEXLabs</a> is licensed under a
<a rel="license" href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
<br />Copyright © <span lang="de">Hochschule der Medien</span> (<abbr>HdM</abbr>) / Stuttgart Media University, 2017.
</p>
<p><a aria-current="page" href="contact-form.html">Contact form</a> | <a href="publisherinfo.html">Publisher information / <span lang="de">Impressum</span></a> | <a href="https://github.com/REMEXLabs/GTx_HDM1.2aX">GitHub repository</a></p>
<!-- <p><a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a></p> -->
</footer>
</body>
</html>