The document discusses HTML forms and form inputs. It provides code examples for creating basic forms with different input types like text, password, submit and reset. It demonstrates how to add labels, placeholders, fieldsets, required fields, autofocus and other attributes to form inputs. The document also covers setting the form method, action, and target, as well as how to process form data submitted via GET and POST requests in PHP.

2. IoT Code LabS M A R T T E C H L I F E
iotcodelab.com
RESEARCH DEVELOPMENT TRAINING

3. HTML: LEC 4
F O R M ( B A S I C )

4. HTML : FORM
Forms is used to take User Input
We Make a Form using HTML Code
Form Data is processed by PHP

5. HTML : FORM
<form>
<input type=“text”><br><br>
<input type=“password”><br><br>
<input type=“submit”>
</form>

6. HTML : FORM INPUT
<form>
<input type=“text”><br><br>
<input type=“password”><br><br>
</form>

7. HTML : FORM SUBMIT
<form>
<input type=“text”><br><br>
<input type=“password”><br><br>
<input type=“submit”>
</form>

8. HTML : FORM RESET
<form>
<input type=“text”><br><br>
<input type=“password”><br><br>
<input type=“submit”>
<input type=“reset”>
</form>

9. FORM: FIELDSET
<form>
<fieldset>
<legend>Log in</legend>
<input type=“text”><br><br>
<input type=“password”><br><br>
<input type=“submit”>
</fieldset>
</form>

10. FORM: OUTPUT

11. FORM: OUTPUT
<form>
User Name: <input type=“text”><br><br>
Password: <input type=“password”><br><br>
<input type=“submit” value=“Login”>
</form>

12. FORM: LABEL 1
<form>
<label for=“username”>User Name:</label>
<input type=“text” id=“username”>
<br><br>
<label for=“password”>Password:</label>
<input type=“password” id=“password”>
<br><br>
<input type=“submit” value=“Login”>
</form>

13. FORM: LABEL 2
<form>
<label>User Name:
<input type=“text”>
</label><br><br>
<label> Password:
<input type=“password”>
</label><br><br>
<input type=“submit” value=“Login”>
</form>

14. FORM: INPUT PLACEHOLDER
<form>
<input type=“text” placeholder=“User Name”>
<br><br>
<input type=“password” placeholder=“Password”>
<br><br>
<input type=“submit” value=“Login”>
</form>

15. FORM: INPUT LABEL 1/PLACEHOLDER
<form>
<label for=“username”>User Name:</label>
<input type=“text” id=“username” placeholder=“User Name”>
<br><br>
<label for=“password”>Password:</label>
<input type=“password” id=“password” placeholder=“password”>
<br><br>
<input type=“submit” value=“Login”>
</form>

16. FORM: INPUT LABEL 2/PLACEHOLDER
<form>
<label>User Name:
<input type=“text” placeholder=“User Name”>
</label><br><br>
<label>Password:
<input type=“password” placeholder=“password”>
</label><br><br>
<input type=“submit” value=“Login”>
</form>

17. FORM: INPUT VALUE
<form>
<label>User Name:
<input type=“text” name=“username” value=“User”>
</label><br><br>
<label>Password :
<input type=“password” name=“password”>
</label><br><br>
<input type=“submit” value=“Log in”>
</form>

18. FORM: INPUT SIZE
<form>
<label>User Name:
<input type=“text” size=“50”>
</label><br><br>
<label>Password :
<input type=“password” size=“50”>
</label><br><br>
<input type=“submit” value=“Log in”>
</form>

19. FORM: INPUT REQUIRED
<form>
<label>User Name:
<input type=“text” required>
</label><br><br>
<label>Password :
<input type=“password” required>
</label><br><br>
<input type=“submit” value=“Log in”>
</form>

20. FORM: INPUT AUTOFOCUS
<form>
<label>User Name:
<input type=“text” autofocus>
</label><br><br>
<label>Password :
<input type=“password”>
</label><br><br>
<input type=“submit” value=“Log in”>
</form>

21. FORM: INPUT NAME
<form>
<label>User Name:
<input type=“text” name=“username”>
</label><br><br>
<label>Password :
<input type=“password” name=“password”>
</label><br><br>
<input type=“submit” name=“submit” value=“Login”>
</form>

22. FORM: ACTION
<form action=“process.php”>
<label>User Name:
<input type=“text” name=“username”>
</label><br><br>
<label>Password :
<input type=“password” name=“password”>
</label><br><br>
<input type=“submit” name=“submit” value=“Login”>
</form>

23. FORM: METHOD (GET)
<form method=“get” action=“process.php”>
<label>User Name:
<input type=“text” name=“username”>
</label><br><br>
<label>Password :
<input type=“password” name=“password”>
</label><br><br>
<input type=“submit” name=“submit” value=“Login”>
</form>

24. FORM: METHOD (POST)
<form method=“post” action=“process.php”>
<label>User Name:
<input type=“text” name=“username”>
</label><br><br>
<label>Password :
<input type=“password” name=“password”>
</label><br><br>
<input type=“submit” name=“submit” value=“Login”>
</form>

25. FORM: TARGET self
<form method=“post” action=“process.php” target=“_self”>
<label>User Name:
<input type=“text” name=“username”>
</label><br><br>
<label>Password :
<input type=“password” name=“password”>
</label><br><br>
<input type=“submit” name=“submit” value=“Login”>
</form>

26. FORM: TARGET blank
<form method=“post” action=“process.php” target=“_blank”>
<label>User Name:
<input type=“text” name=“username”>
</label><br><br>
<label>Password :
<input type=“password” name=“password”>
</label><br><br>
<input type=“submit” name=“submit” value=“Login”>
</form>

27. FORM: PROCESS [GET]
<?php
echo $_GET[“username”];
echo $_GET[“password”];
?>

28. FORM: PROCESS [POST]
<?php
echo $_POST[“username”];
echo $_POST[“password”];
?>

29. TOPIC COVERED
Form
method
o get
o post
action
target
label
fieldset
legend
input
type
name
placeholder
value
size
required
autofocus

30. ANY
QUESTION?

32. IoT Code LabS M A R T T E C H L I F E
iotcodelab.com
RESEARCH DEVELOPMENT TRAINING