-
Notifications
You must be signed in to change notification settings - Fork 0
/
blogpage2.html
149 lines (126 loc) · 7.35 KB
/
blogpage2.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NehaShanbhag</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navigation">
<a style="color:white; text-decoration: none; "href="index.html">MyPortfolio</a>
<ul class="nav-pills">
<li class="list-item-inline "><a class="link " href="blog.html">Back</a></li>
</ul>
</nav>
<section class="content-holder">
<div class=" container-blogpage">
<img style="width:100%;padding-bottom: 2%;" src="/Images/formdata.png">
<div class="content">
<p>
Imagine you are designing a registeration page and there are numerous input fields, buttons and so on. Would you keep on defining reference for each and every field to access the data, no right? Theres a necessity for a shortcut or a command which will make our work easier, here's where <strong>Form Data</strong> comes into picture.
</p>
<p>
FormData provides a interface to define and access these fields disguised as set of key/value pair.The <strong>FormData()</strong> function <a class="blogLink"href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor"> (constructor)</a> lets you create a <a class="blogLink"href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor">object</a> of FormData.
<p class="blogCode">
<b>var formData=new FormData(form)</b> <span class="blogComment"> // here form in brackets is the name or the class/id name of the form</span>
</p>
</p>
<h1>
<u>Methods of FormData()</u>
</h1>
<p>
Methods are actions that can be performed on objects.Here are the methods of FormData() :
<ul class="list-non-bullet">
<li>
<h2>append()</h2>
<p>
As the name suggest append() adds new value to the existing value of a key or creates a new key and adds the value.
</p>
<p class="blogCode">
<b>formData.append( 'username' , 'John' );</b> <span class="blogComment"> // here 'username' is the <b>key name</b> and 'John' is the <b>value</b> which youll be appending</span>
</p>
</li>
<li>
<h2>delete()</h2>
<p>
Using this youll be able to delete a key and its corresponding value of a object.
</p>
<p class="blogCode">
<b>formData.delete(name);</b> <span class="blogComment"> // here 'name' is the <b>key name</b></span>
</p>
</li>
<li>
<h2>entries()</h2>
<p>
This method will return you a array or key-value pair
</p>
<p class="blogCode">
<b>formData.entries();</b><br>
<span class="blogComment"><br>// Eg
We have a form with id name form and input fields as follows<br>
<span><</span>input="text" name="key1" value="value1"> <br>
<span><</span>input="text" name="key2" value="value2"> <br><br>
//Then using formData.entries will give us array
[ key1,value1 ] and [key2,value2]
</span>
</p>
</li>
<li>
<h2>get() and getAll()</h2>
<p>
get() returns the value of the first key(name) while getAll() returns a array of values which the same key(name)
</p>
<p class="blogCode">
<b>formData.get(name);</b> <span class="blogComment"> // here name is the <b>key name</b> <br></span> <br>
<b>formData.getAll(name);</b> <span class="blogComment"> // here name is the <b>key name</b>, and returns a array for values with name key.
</p>
</li>
<li>
<h2>has()</h2>
<p>
This return a boolean value i.e true/false in response to the present of value.
</p>
<p class="blogCode">
<b>formData.has(name);</b> <span class="blogComment"> // So if the key 'name' is has its corresponding value it returns true else returns false
</p>
</li>
<li>
<h2>keys()</h2>
<p>
Returns an array of keys (names) under the object.
</p>
<p class="blogCode">
<b>formData.has(name);</b> <span class="blogComment"> // So if the key 'name' is has its corresponding value it returns true else returns false
</p>
</li>
<li>
<h2>values()</h4>
<p>
Returns of array of all values under the object
</p>
<p class="blogCode">
<b>formData.values();</b> <span class="blogComment"> // Returns array of values.
</p>
</li>
</ul>
</div>
</div>
<aside class="box">
<ul class="blog-list">
<li class="link"><a class="link-otherblogs" href="/blogpage1.html"> All about Emmets </a></li>
<li class="link"><a class="link-otherblogs" href="#">Lorem ipsum dolor sit amet consec tetur, adipisicing elit. Cupiditate a </a></li>
<li class="link"><a class="link-otherblogs" href="#">Lorem ipsum dolor sit amet consec tetur, adipisicing elit. Cupiditate a </a></li>
<li class="link"><a class="link-otherblogs" href="#">Lorem ipsum dolor sit amet consec tetur, adipisicing elit. Cupiditate a </a></li>
<li class="link"><a class="link-otherblogs" href="#">Lorem ipsum dolor sit amet consec tetur, adipisicing elit. Cupiditate a </a></li>
</ul>
</aside>
</section>
<footer class="footer">
<a class="link " href="https://github.com/nshanbhag20001412">Github</a> </li>
<a class="link " href="https://twitter.com/NehaShanbhag14">Twitter</a> </li>
<a class="link " href="https://www.linkedin.com/in/neha-shanbhag-866649175">LinkedIn</a> </li>
</footer>
</body>
</html>