Merge pull request #9 from gauravfs-14/master

[added]: HTML Forms sample
ComputeNepal · Sep 13, 2023 · 42d6270 · 42d6270
2 parents 9886085 + 4691224
commit 42d6270
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git a/docs/HTML Forms/_category_.json b/docs/HTML Forms/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "HTML - Forms",
+  "position": 13,
+  "link": {
+    "type": "generated-index",
+    "description": "HTML Forms are used to take input from the user."
+  }
+}
diff --git a/docs/HTML Forms/a-sample-html-form.md b/docs/HTML Forms/a-sample-html-form.md
@@ -0,0 +1,50 @@
+---
+sidebar_position: 14
+keywords: [html, sample html, basic html]
+---
+
+# A Sample HTML Form
+
+Before starting out to discuss about HTML Forms, let's take a look at the same HTML form.
+
+```html title=sample-form.html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>My First HTML Document</title>
+  </head>
+  <body>
+    <h1>This is my first HTML Form.</h1>
+    <form>
+      <label for="username">Username</label>
+      <input type="text" placeholder="john123" id="username" />
+      <label for="password">Password</label>
+      <input type="password" placeholder="********" id="password" />
+      <button type="submit">Login</button>
+    </form>
+  </body>
+</html>
+```
+
+## Explanation
+
+The code above is a simple example of a login form.
+
+- `<form>` is the declaration of the form in HTML.
+- `<label>` give the label to the particular input box.
+- `<input>` is the element that allows user to input certain values to them.
+- `<button>` lets the user to submit the form once the form is filled.
+
+The output of the following code is as follows:
+
+---
+
+<label for="username">Username</label>
+<input type="text" placeholder="john123" id="username" />
+<label for="password">Password</label>
+<input type="password" placeholder="********" id="password" />
+<button>Login</button>
+
+---
+
+More depth description about HTML forms are in the later pages.