The document provides an overview of HTML forms, including how to create basic forms with different input types like text, password, submit and radio buttons. It covers various form attributes like name, value, placeholder, required and different ways to style labels. The document also discusses form elements like select dropdowns, checkboxes and textareas. It provides examples of how to use these different form features to collect user input through a web form.

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

3. HTML: LEC 5
F O R M

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 (MORE)
R a d i o , C h e c k b o x , D r o p d o w n , D a t a l i s t ,
Te x t a r e a

28. FORM: INPUT RADIO
<label>City:</label><br>
<input type="radio" name="city" value="Dhaka">
Dhaka<br>
<input type="radio" name="city" value="Sylhet">
Sylhet<br>
<input type="radio" name="city" value="Rajshahi">
Rajshahi<br>
<input type="radio" name="city" value="Khulna">
Khulna<br>

29. FORM: INPUT RADIO CHECKED
<label>City:</label><br>
<input type="radio" name="city" value="Dhaka">
Dhaka<br>
<input type="radio" name="city" value="Sylhet" checked>
Sylhet<br>
<input type="radio" name="city" value="Rajshahi">
Rajshahi<br>
<input type="radio" name="city" value="Khulna">
Khulna<br>

30. FORM: INPUT CHECKBOX
<label>City:</label><br>
<input type="checkbox" name="city[]" value="Dhaka">
Dhaka<br>
<input type="checkbox" name="city[]" value="Sylhet">
Sylhet<br>
<input type="checkbox" name="city[]" value="Rajshahi">
Rajshahi<br>
<input type="checkbox" name="city[]" value="Khulna">
Khulna<br>

31. FORM: INPUT CHECKBOX CHECKED
<label>City:</label><br>
<input type="checkbox" name="city[]" value="Dhaka">
Dhaka<br>
<input type="checkbox" name="city[]" value="Sylhet">
Sylhet<br>
<input type="checkbox" name="city[]" value="Rajshahi"
checked> Rajshahi<br>
<input type="checkbox" name="city[]" value="Khulna">
Khulna<br>

32. FORM: SELECT (DROPDOWN)
<label>City:</label>
<select name="city">
<option value="Dhaka">Dhaka</option>
<option value="Sylhet">Sylhet</option>
<option value="Rajshahi">Rajshahi</option>
<option value="Khulna">Khulna</option>
</select>

33. FORM: SELECT (MULTIPLE)
<label>City:</label>
<select name="city" multiple>
<option value="Dhaka">Dhaka</option>
<option value="Sylhet">Sylhet</option>
<option value="Rajshahi">Rajshahi</option>
<option value="Khulna">Khulna</option>
</select>

34. FORM: SELECT PLACEHOLDER 1
<label>City:</label>
<select name="city">
<option value="">Select City</option>
<option value="Dhaka">Dhaka</option>
<option value="Sylhet">Sylhet</option>
<option value="Rajshahi">Rajshahi</option>
<option value="Khulna">Khulna</option>
</select>

35. FORM: SELECT PLACEHOLDER 2
<label>City:</label>
<select name="city">
<option value="" disabled selected>Select City</option>
<option value="Dhaka">Dhaka</option>
<option value="Sylhet">Sylhet</option>
<option value="Rajshahi">Rajshahi</option>
<option value="Khulna">Khulna</option>
</select>

36. FORM: SELECT PLACEHOLDER 3
<label>City:</label>
<select name="city" required>
<option value="" hidden>Select City</option>
<option value="Dhaka">Dhaka</option>
<option value="Sylhet">Sylhet</option>
<option value="Rajshahi">Rajshahi</option>
<option value="Khulna">Khulna</option>
</select>

37. FORM: SELECT OPTGROUP
<select name="city">
<option value="" hidden>Select City</option>
<optgroup label ="Bangladesh">
<option value="Dhaka">Dhaka</option>
<option value="Sylhet">Sylhet</option>
</optgroup>
<optgroup label ="India">
<option value="Mumbai">Mumbai</option>
<option value="Delhi">Delhi</option>
</optgroup>
</select>

38. FORM: DATALIST
<input list="city">
<datalist id="city">
<option value="Dhaka">
<option value="Sylhet">
<option value="Rajshahi">
<option value="Khulna">
</datalist>

39. FORM: TEXTAREA
<textarea name="comment"></textarea>
<textarea name="comment" placeholder="Comment">
</textarea>
<textarea name="comment">EditableText</textarea>
<textarea name="comment" rows="5“ cols="40">
</textarea>

40. FORM: INPUT ATTRIBUTE
type
name
value
placeholder
size
list
maxlength
min
max
step
•required
•autofocus
•disabled
•readonly
•multiple
•hidden

41. FORM: INPUT TYPE
text
passowrd
submit
reset
radio
checkbox
email
time
date
datetime-local
month
week
color
•search
•tel
•url
•file
•number
•range

42. FORM: ATTRIBUTE
method
action
target

43. FORM: ELEMENTS
input
select/ option/ optgroup
datalist
textarea
button

44. TOPIC COVERED
Form
Form Attribute
method
o get
o post
action
label
fieldset
legend
Form Element
input
o type
o attribute
select
o option
o optgroup
datalist
textarea

45. ANY
QUESTION?

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