-
Notifications
You must be signed in to change notification settings - Fork 0
/
elementsformpost4.html
152 lines (139 loc) · 6.96 KB
/
elementsformpost4.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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE HTML>
<html>
<head>
<title>Form Elements</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<a href="index.html" class="logo"><strong>JuneDev</strong> <span>.com</span></a>
<nav>
<a href="#menu">Menu</a>
</nav>
</header>
<!-- Menu -->
<nav id="menu">
<ul class="links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="careerHighlights.html">Career Highlights</a></li>
<li><a href="programmingPortfolio.html">Programming Portfolio</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="codeprojects.html">Gallery</a></li>
</ul>
<ul class="actions stacked">
<li><a href="https://calendly.com/iamjunedev" class="button primary fit">Schedule Interview</a></li>
<li><a href="https://github.com/JuneDev5779/junedev5779.github.io" class="button fit">Explore This Repo</a></li>
</ul>
</nav>
<!-- Main -->
<div id="main" class="alt">
<!-- One -->
<section id="one">
<div class="inner">
<header class="major">
<h1> Form Element Inputs on HTML Documents </h1>
</header>
<span class="image main"><img src="images/formedia.jpeg" alt="computer" /></span>
<H2>Mastering Html Forms before progressing towards the critical means of front-end web development.</H2>
<h3>Quick Summary</h3>
<p>Learn the basic code needed to start out writing Html forms. Forms is how your website can collect your user’s data and be able to implement functionality and interaction on your page.</p>
<h3>Requirements</h3>
<ul>A basic understanding of organization Html layouts and main tags, (header, footer, lists, nav, div,)</ul>
<h3>Forms</h3>
<p>A good use of form-tag is when a user is requesting a file, image, or data, from the website or when a user is inputting data into a website such as email, address, text, etc. The methods are “GET” or “POST”. Three different 'input' types are “emailInput” (when a user can input their email into the form), “passwordInput” (when a user can input a password into the form), or “fileInput” (when a user can input/ upload a file onto the form).</p>
<h3>Examples</h3>
<span class="image main"><img src="images/inputforms.png" alt="example code" /></span>
<h4>“Programs must be written for people to read, and only incidentally for machines to execute.” <br>
― Harold Abelson, Structure and Interpretation of Computer Programs</h4>
<p>Instructing your computer to collect information through a webpage is the first step to programming. Forms are essential for providing the user accessibility to the website’s directory. The essence of documentation and communications is executed through forms. In an era where many forms are available online rather than on paper, we understand the necessity for developers to be able to create even the most basic form for a webpage.</p>
<h5>Tips</h5>
<p>Make sure to use the correct types of form input labels. Also remember there is only one unique #id which can not be replicated.</p>
<div>
</section>
</div>
<!-- Contact -->
<section id="contact">
<div class="inner">
<section>
<form method="post" action="mailto:iamjunedev@gmail.com" enctype="text/plain">
<div class="fields">
<div class="field half">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="field half">
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="6"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="primary" /></li>
<li><input type="reset" value="Clear" /></li>
</ul>
</form>
</section>
<section class="split">
<section>
<div class="contact-method">
<span class="icon alt fa-envelope"></span>
<h3>Email</h3>
<a href="#">iamjunedev@gmail.com</a>
</div>
</section>
<section>
<div class="contact-method">
<span class="icon alt fa-phone"></span>
<h3>Phone</h3>
<span>(970) 541-0681 </span>
</div>
</section>
<section>
<div class="contact-method">
<span class="icon alt fa-home"></span>
<h3>Address</h3>
<span>1776 S Garfield St. <br />
Denver, CO 80014<br />
United States of America</span>
</div>
</section>
</section>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<ul class="icons">
<li><a href="https://twitter.com/" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon alt fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon alt fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="https://github.com/iamjunedev" class="icon alt fa-github"><span class="label">GitHub</span></a></li>
<li><a href="https://www.linkedin.com/in/junibeldelacruz/" class="icon alt fa-linkedin"><span class="label">LinkedIn</span></a></li>
</ul>
<ul class="copyright">
<li>© Unfold, Evolve, Advance </li><li>Develop: <a href="https://JuneDev.com">I am June Dev</a></li>
</ul>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>