HTML-Hypertext Markup Language

Css-Cascading Style Sheets

1|P age CodeCraft by piyush

Html form

- Html form is used to collect user input in the webpage and can then be send to the server
for processing.
- <form></form> In html form tag is used to create form

- Attributes of <form> tag

1. Action –it specifies url where the form data will be send when the form is submitted.
2. Enctype –specifies the encoding type when submitting form, Commonly used for file
uploading. Value is multipart/form-data
3. Method –it specifies http method
a. Get –Send form data as URL parameter , visible in URL
b. Post –Sends the form data in request body more secure for sensitive information.
4. Name –Indentifies the form –useful for accessing form in javascript

Form elements
1. Input tag
- <input/>
- It can take different types using the type attribute.
- Different Values-

1. Text –A single line text field (Default)

o <input type="text" name="username">

2. Password –A text field where character are masked (hidden)

o <input type="password" name="password">

3. Email –A text field for email address , includes basic validation

o <input type="email" name="email">

4. Tel –A text field for telephone number

o <input type="tel" name="phone">

5. Search –A text field designed for search inputs

o <input type="search" name="search">

6. Number –A field for numeric inputs with optional min, max and step attributes
o <input type="number" name="age" min="1" max="100">

7. Radio –A radio button for selecting one option from group

o <input type="radio" name="gender" value="male"> Male
o <input type="radio" name="gender" value="female"> female

2|P age CodeCraft by piyush

 8. Checkbox –A checkbox for selecting one or more option from group
o <input type="checkbox" name="subscribe" value="yes">
Subscribe to Xyz

9. Range –A slider to select value between specified range

o <input type="range" name="volume" min="0" max="100"
step=”10”>

10. Submit –A button to submit form data to server

o <input type="submit" value="Login ">

11. Reset –A button to reset all form fields to their initial value
o <input type="reset" value="Reset">

12. Image – A graphical version of submit button

o <input type=”image” scr=”icon.jpg”>

13. Date, Datetime-Local, month, week, time

14. Hidden –A field that stores data , without displaying to user

o <input type="hidden" name="userID" value="12345">

15. Color –A color picker

o <input type="color" name="favcolor">

16. File –A filed for file upload

o <input type="file" name="myfile ">

17. Value –defines initial value of field

18. Placeholder –Provides hint text to use of what should be entered in input field

19. Required –It indicated that field must be filled before submitting form

2. Label tag
- Defines label for html elements to make them accessible and user-friendly
o <label for="username">Username:</label>
o <input type="text" id="username" name="username">

3. TextArea tag
- Creates multi-line text input area
- Its useful for larger block of text
o <textarea name="comments" rows="4" cols="50"></textarea>

3|P age CodeCraft by piyush

 4. Select tag
- Define drop-down list of options
o <select name="country">
<option value="india">India</option>
<option value="usa">USA</option>
</select>

5. Optgroup tag
- It used to group options inside a select dropdown list for easier navigation

o <select name="tech">
<optgroup label="Front-End">
<option value="-1">select tech</option>
<option value="html">html</option>
<option value="css">css</option>
</optgroup>
<optgroup label="Back-end">
<option value="java">java</option>
<option value="php">php</option>
</optgroup>
</select>

6. Button tag
- Creates clickable buttons
- Used to submit form data and also used to perform some action with javascript
o <button type="submit">Submit</button>

7. Fieldset tag
- It groups related filed in the form
- Legend tag
- Provides caption to group

o <fieldset>
<legend>Personal Information</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname">
</fieldset>

4|P age CodeCraft by piyush

 8. Datalist tag
- Provides list of predefined options to input field

o <input list="mylist" name="city">

<datalist id="mylist">
<option value="pune"></option>
<option value="mumbai"></option>
<option value="delhi"></option>
</datalist>

Audio and Video tag

- The HTML <audio> and <video> tags are used to embed media (audio and video files)
directly into a webpage.
- They provide a simple way to include multimedia content with built-in controls such as
play, pause, volume, and more.

1. Audio tag

- The <audio> tag is used to embed audio content like music or sound files into a webpage.
- It can play formats like MP3, OGG, or WAV.

- Attributes of audio tag

1. Controls : Adds controls for the user to interact with the audio.
2. Autoplay : Starts playing the audio as soon as it is ready.
3. Type : specifies type of source.
4. Src : specifies source of audio.

<audio controls>
<source src="audiofile.mp3" type="audio/mpeg" autoplay>
<source src="audiofile.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>

5|P age CodeCraft by piyush

 2. Video tag

- The <video> tag is used to embed video content into a webpage.

- It supports formats like MP4, WebM, and OGG.
- Attributes
1. Controls : Adds controls for the user to interact with the audio.
2. Autoplay : Starts playing the audio as soon as it is ready.
3. Type : specifies type of source.
4. Src : specifies source of audio.

<video controls width="600">

<source src="video.mp4" type="video/mp4" autoplay>
<source src="video.ogg" type="video/ogg">
Your browser does not support the video element.
</video>

6|P age CodeCraft by piyush