HTML
HTML Forms and Frames
HTML Forms:
The user input can be collected using html forms. It can contain various fields such as textboxes, checkboxes, radio buttons, menus etc. to let the users enter the information and click on submit button to submit the information to the server. In case of e-commerce, the purchased goods can be dispatched to the user location mentioned in the form. The html form provides various user friendly fields to collect information. The form can even provide fields like password which doesn’t show the actual data being types. This gives security for the user to create login credentials anywhere without any fear. The information can be provided after logging in.
Different browsers like chrome, Firefox, Safari etc. support the html forms. The related information in a form can be grouped using the <fieldset> element. The <legend> element can be used to give caption.
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
</head>
<body>
<form action=”test.html”>
<label for=”empid”>EmpID:</label>
<input type=”text” id=”empid” name=”empid”><br>
<label for=”empname”>EmpName:</label>
<input type=”text” id=”empname” name=”Empname”><br>
<input type=”radio” id=”head” name=”office” value=”Head Office” checked>
<label for=”head”>Head Office</label>
<input type=”radio” id=”reg” name=”office” value=”Regional Office”>
<label for=”reg”>Regional Office</label><br>
<input type=”Checkbox” id=”TA” name=”travelallow”>
<label for=”TA”>Travel allowance</label>
<input type=”Checkbox” id=”HA” name=”houseallow”>
<label for=”HA”>House allowance</label><br />
<label for=”dt”>Date:</label>
<input type=”date” id=”dt” name=”dt”><br />
<label for=”mnth”>Month:</label>
<input type=”month” id=”mnth” name=”mnth”><br />
<label for=”mob”>Mobile:</label>
<input type=”tel” id=”mob” name=”mob” placeholder=”12-3456-7890″ pattern=”[0-9]{2}-[0-9]{4}-[0-9]{4}”><br />
<label for=”passwrd”>Password:</label>
<input type=”password” id=”passwrd” name=”passwrd”><br />
<label for=”fl”>File:</label>
<input type=”file” id=”fl” name=”fl”><br />
<label for=”minmax”>Price range:</label>
<input type=”range” id=”minmax” name=”minmax” min=”500″ max=”1000″ step=”5″><br />
<label for=”prg”>Buffering</label>
<progress id=”prg” value=”400″ max=”500″></progress><br />
<label for=”txtar”>Summary</label>
<textarea id=”txtar” name=”txtar” rows=”5″ cols=”20″>This is html summary.This is html summary.This is html summary.</textarea><br />
<label for=”fruits”>Fruits</label>
<select name=”fruit” id=”fruit” multiple>
<option value=”Apple”>Apple</option>
<option value=”Berry”>Berry</option>
<option value=”Pomegranate” selected>Pomegranate</option>
<option value=”Pineapple”>Pineapple</option>
<option value=”Grapes”>Grapes</option>
</select><br />
<input type=”image” name=”img” width=”50″ height=”50 “src=”Logo.png”><br />
<input type=”submit” name=”sub” value=”submit” />
<input type=”reset” name=”res” value=”reset” />
</form>
</body>
</html>
HTML Frames:
HTML has the ability to show a web page inside another web page. Another document can be embedded within the html document. Iframes in html helps in achieving this effect. An Iframe is an inline frame that can subdivide a region into different sections to show other documents. The tag is <iframe>. Different iframes can be identified by a name attribute of the iframe. The src attribute specifies the URL of the document to be shown. The width and height of the iframe can be defined.
<!DOCTYPE html>
<html>
<head>
<title>Frames</title>
</head>
<body>
<p>Working with IFrames:</p>
<iframe height=”400″ width=”400″ src=”Logo.png” name=”myiframe1″></iframe>
<iframe height=”400″ width=”400″ src=”test.png” name=”myiframe2″></iframe>
<iframe height=”400″ width=”400″ src=”test.html” title=”IFrame Test” name=”myiframe2″></iframe>
<!–<iframe frameborder=”1″ height=”400″ width=”400″ src=”https://www.google.com/” name=”myiframe3″></iframe>
<iframe frameborder=”1″ height=”400″ width=”400″ src=”https://www.youtube.com/embed/watch?v=3TaEcsSwT3g” name=”myiframe3″></iframe>–>
</body>
</html>