web

Frames & IFrames, HTML Forms

by
with no comment
Contents hide
1 Frames
2 index.html
3 frame1.html
4 frame2.html
5 frame3.html
6 IFrames
7 HTML Form
7.1 Form Elements
7.1.1 HTML Form:
8 index.html
8.1 PHP Processing Script:
9 process.php

Frames

Frames एक HTML Element हैं, जिनका use किसी Web Page को कई Section या Frames में Divide करने के लिए किया जाता है। प्रत्येक Frame में एक अलग HTML Document हो सकता है, जो आपको एक ही Browser Window में Multiple Web Pages को Display करने की Permission देता है। Frame को <frame> Element का use करके Define किया जाता है, जो <frameset> Structure का हिस्सा है।

Example: Create Vertical Frames

index.html





<!DOCTYPE html>


<html>


<head>


    <title>Frame tag</title>


</head>


  <frameset cols=”25%,50%,25%”>


    <frame src=”frame1.html” >


    <frame src=”frame2.html”>


    <frame src=”frame3.html”>


  </frameset>


</html>

frame1.html





<!DOCTYPE html>


<html>


<head>


    <style>


       div{


            background-color: #7fffd4;


            height: 500px;


        }


    </style>


</head>


<body>


    <div>


        <h2>This is first frame</h2>


    </div>


 </body>


</html>

frame2.html





<!DOCTYPE html>


<html>


<head>


    <style>


       div{


         background-color: #17b8b8;


         height: 500px;




       }


    </style>


</head>


<body>


    <div>


        <h2>This is Second frame</h2>


    </div>


 </body>


</html>

frame3.html





<!DOCTYPE html>


<html>


<head>


    <style>


       div{


         background-color: #3f0e80;


         height: 500px;


                      }


    </style>


</head>


<body>


                <div>


          <h2>This is Third frame</h2>


    </div>


 </body>


</html>

Output:

IFrames

IFrames (Inline Frame) Frame के समान होते हैं, लेकिन <iframe> Element का use करके Web Page के Content के भीतर Embedded होते हैं। इनका उपयोग आमतौर पर किसी Web Page के भीतर External Content, जैसे Maps, Video या Advertisements Display करने के लिए किया जाता है।

Example:



<!DOCTYPE html>

<html>

<head>

<title>IFrame Example</title>

</head>

<body>

<h1>Welcome to my website!</h1>

<p>Here is an Embedded Google Map:</p>

<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12080.812532241707!2d-74.0069932296464!3d40.71277590405122!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259022121e4db%3A0x829496d9756f50f9!2sNew%20York%2C%20NY!5e0!3m2!1sen!2sus!4v1629838324887!5m2!1sen!2sus” width=”600″ height=”450″ style=”border:0;” allowfullscreen=”” loading=”lazy”></iframe>

</body>

</html>

Differences between Frames and IFrames

  • Usage: Frame का उपयोग किसी Web Page को कई Section में विभाजित करने के लिए किया जाता है, प्रत्येक Section एक अलग Web Page Dispaly करता है। IFrames का Use Single Web Page के भीतर External Content को Embed करने के लिए किया जाता है।
  • Syntax: Frame को <frameset> के भीतर <frame> Element का use करके Define किया जाता है, जबकि IFrames सीधे HTML Content के भीतर <iframe> Element का use करके बनाए जाते हैं।
  • Communication: एक ही Frameset के भीतर Frame Javascript का use करके एक दूसरे के साथ Communication कर सकते हैं। जबकि IFrames में एक Stricter Security Model होता है, और आमतौर पर Same-Origin Policy के कारण एक-दूसरे के साथ सीधे Communication नहीं कर सकते हैं।

HTML Form

HTML (Hypertext Markup Language) Web Page का Backbone है, और इसका उपयोग Internet पर Content के Structure के लिए किया जाता है। इसकी Essential Feature में से एक Form बनाने की क्षमता है, जो User को Data Intput करने की Permission देती है| जिसे आगे की Process के लिए Web Server पर Submit किया जा सकता है।

Syntax of an HTML Form



<form action=”server_script.php” method=”post”>

<!– Form elements go here –>

</form>
  • Action Attribute उस URL को Specify करते है, जहां Submit होने पर Form Data Send किया जाएगा।
  • Method Attribute Server पर Form Data Send करते Time उपयोग की जाने वाली HTTP Method को Define करती है। Comman Method GET और POST हैं।

Form Elements

HTML विभिन्न Form Element Provide करता है, जो User को विभिन्न प्रकार के Data Intput करने की Permission देता है। सबसे अधिक use किए जाने वाले Form Element में से कुछ में शामिल हैं-

  • Text Input


<label for=”username”>Username:</label>

<input type=”text” id=”username” name=”username” />
  • Password Input


<label for=”password”>Password:</label>

<input type=”password” id=”password” name=”password” />
  • Radio Buttons


<label>Gender:</label>

<input type=”radio” id=”male” name=”gender” value=”male” />

<label for=”male”>Male</label>

<input type=”radio” id=”female” name=”gender” value=”female” />

<label for=”female”>Female</label>
  • Checkboxes:


<label for=”subscribe”>Subscribe to Newsletter:</label>

<input type=”checkbox” id=”subscribe” name=”subscribe” value=”yes” />
  • Dropdown Select:


<label for=”country”>Country:</label>

<select id=”country” name=”country”>

<option value=”us”>United States</option>

<option value=”ca”>Canada</option>

<option value=”uk”>United Kingdom</option>

</select>
  • Text Area:


<label for=”comments”>Comments:</label>

<textarea id=”comments” name=”comments” rows=”4″ cols=”50″></textarea>
  • Submit Button:


<input type=”submit” value=”Submit” />

Example:

आइए कुछ Element के साथ एक Simple HTML Form बनाएं और Form Submit होने पर Output Display करें। इस Example में, हम Form Submissions को Handle और Submit किए गए Data को Display करने के लिए PHP का use करेंगे।

HTML Form:

index.html



<!DOCTYPE html>

<html>

<head>

<title>Sample Form</title>

</head>

<body>

<h1>Sample Form</h1>

<form action=”process.php” method=”post”>

<label for=”name”>Name:</label>

<input type=”text” id=”name” name=”name” /><br />


<label for=”email”>Email:</label>

<input type=”text” id=”email” name=”email” /><br />


<label>Gender:</label>

<input type=”radio” id=”male” name=”gender” value=”male” />

<label for=”male”>Male</label>

<input type=”radio” id=”female” name=”gender” value=”female” />

<label for=”female”>Female</label><br />


<label for=”comments”>Comments:</label><br />

<textarea id=”comments” name=”comments” rows=”4″ cols=”50″></textarea><br />


<input type=”submit” value=”Submit” />

</form>

</body>

</html>
PHP Processing Script:

process.php



<!DOCTYPE html>

<html>

<head>

<title>Form Submission Result</title>

</head>

<body>

<h1>Form Submission Result</h1>

<?php

if ($_SERVER[“REQUEST_METHOD”] == “POST”) {

$name = $_POST[“name”];

$email = $_POST[“email”];

$gender = $_POST[“gender”];

$comments = $_POST[“comments”];


echo “<p><strong>Name:</strong> $name</p>”;

echo “<p><strong>Email:</strong> $email</p>”;

echo “<p><strong>Gender:</strong> $gender</p>”;

echo “<p><strong>Comments:</strong> $comments</p>”;

}

?>

</body>

</html>

जब आप Form भरते हैं, और “Submit” Button पर Clcik करते हैं| तो आपके द्वारा Enter किया गया Data Process.php Script पर भेजा जाएगा, जो फिर Submit की गई Information को एक नए Page पर Display करेगा।

Post Views: 545
Tags: No tags

Add a Comment

Your email address will not be published. Required fields are marked *