HTML iframe, Multimedia and Form
HTML Iframe
Iframe is an inline HTML element which allows users to create a frame in existing webpage, where content can be loaded.
Example -
<body>
<h2> Iframe Example</h2>
<iframe src="https://www.wikipedia.org/" width="80%"
height="500px" frameborder="0"></iframe>
Similarly, we can use name attribute to design multiple windows. Anchor links should be supplied
target attribute as below.
<body>
<h2> Iframe Example</h2>
<iframe name="frame1" width="80%"
height="400px" frameborder="2"></iframe>
<br>
<a href="https://www.wikipedia.org/" target="frame1">Link1</a>
<a href="https://premium.mysirg.com/" target="frame1">Link2</a>
HTML Form
HTML forms provide a way to take display from user. Similar to console application, where we have blank screen to input data, in case of online Web application forms are used to input data from client machine. Client provides information and servers cater required information using HTTP protocol.
When form data is submitted, request goes to the server along with form data. Web server will use the requested data for a resource requested and can render required attribute.
In usual scenario, whenever a user performs some form activity such as login. User will request the required page from brower and request is sent to server for rendering. Server machine will validate the credentials provided by the user. If it is a valid user, user is redirect to different page. Incase, there is authentication failure, error page is provided to user. This is done by some server side application program such as Java,Python,etc.
We need to use action element of form as below. Now in method, we have to provide type of request usually it is post and get. The difference is when form is submitted, form data is appended to url if it is get request. In case of post, data is appended as object(suitable for sensative data).
Incase of get we can send limited data ( approx 2000), but post can be used to send multiple data. If method is not defined by default it is get.
When a user click submit, then form is sent to server.
Example -
<body>
<h1>About HTML </h2>
<h2>Form Example</h2>
<form action="Sample.py" method="get">
Username: <input type="text" name="Login" placeholder="Enter user"><br>
Password: <input type="password" name="" placeholder="Password" id="">
<br>
Hindi <input type="checkbox" name="Languages" id="">
English<input type="checkbox" name="Default"><br>
<input type="button" value="Sample">
<input type="radio" name="gender" id="">male
<input type="radio" name="gender" id="">female
<input type="date" >
<input type="time" name="" id="">
<br>
<p>Enter the cities of your choice</p>
<select name="Location">
<option value="Pune">Pune</option>
<option value="Bangalore">Banglore</option>
<option value="Indore" selected>Indore</option>
</select>
<br>
<textarea name="Sample" id="" cols="40" rows="10"></textarea><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
</body>
Div
Div is a block element tag which is used to group elements. This tag is quite handy when we use CSS to decorate it.
<div>
Hindi <input type="checkbox" name="Languages" id="">
English<input type="checkbox" name="Default"><br>
<input type="button" value="Sample">
<input type="radio" name="gender" id="">male
<input type="radio" name="gender" id="">female
<input type="date" >
<input type="time" name="" id="">
</div>
If we want to update smaller section of an element then span tag is used
<span>Form</span> Example
Multimedia
<!doctype html>
<html>
<head>
<title>HTML Multimedia</title>
</head>
<body>
<video width = "500" height = "500 " controls>
<source src="SampleVideo_1280x720_20mb.mp4" type="video/mp4">
</video>
<br><audio controls>
<source src="SampleAudio.mp3" controls="">
</audio>
<p>If it doesnt work, please upgrade your browser!!</p>
</body>
</html>
Comments
Post a Comment