Web Design with HTML, CSS, Bootstrap Course Lecture 4.

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