how can I place an iFrame around this form? On submit my button directs to a success page and I need it all to stay in one screen, hence incorporating an iframe. How can I achieve this? I've never used them before and adding <iframe> </iframe> tags around the form just makes it disappear.
Here's my form:
<form action="#link">
<input type="text" name="name" required placeholder="Enter your name"/>
<input type="email" name="email" required placeholder="Enter a valid e-mail address"/>
<input type="text" name="comment" required placeholder="Enter your comment"/>
<input type="submit" value="submit" />
</form>
If you place the form code, including the code to redirect to your success page in a separate document - usually PHP, then add the iFrame of that document where you want it.
An iframe is a tag that allows you to include a page inside another page. So, you have to link to another file, and you cannot put other tags inside it, as you tried.
To achieve what you need, you have to create a file, lets call it your_other_file.php, where you have the code of the form, and the code of the sucess page.
in your main page, you put something like this
<iframe width="800" height="600" src="your_other_file.php"></iframe>
depending of your purpose, you could prefer to send the form by ajax and update de div. but if you have no much experience, this approach is good enough.
Related
I am using a form id= contact-form with a form loader. I have tried getting my email to submit with form action and html href however nothing has working this is what I am currently trying to get to work. any suggestions?
<form method="post" action="mailto:m_galvin1005#email.campbell.edu" >
<input type="submit" value="Send Email" />
</form>
I placed this form method inside of a form id. Not sure if thats where I am getting held up at
Unfortunately, browsers don't actually know how to send emails. The web browser only really knows how to render HTML, JS and CSS code into a visual experience.
PHP is a language that runs server-side, which you can use to tell a web server to send an email to whatever address you input.
Here's a good article on PHP Emailing: https://css-tricks.com/snippets/php/send-email/
It is important to note that this code REQUIRES a web-space or server to compile.
It will be a very basic email form, having said this I think you are missingpost argument in your form tag. The following should work
<form action="mailto:m_galvin1005#email.campbell.edu" method="post" enctype="text/plain" >
Name:<input type="text" name="Name">
Email:<input type="text" name="Email">
<input type="submit" name="submit" value="Submit">
</form>
I'm trying to open a form action url in a iframe which is in another html page.
I successfully opened it in a iframe which is on the same page with this code:
<form class="form" action="myConnexionURL" target="iframe-myAccount" method="post">
<input type="text" id="login" name="login" placeholder="ID">
<input type="password" id="pass" name="pass" placeholder="PSW">
<input type="submit" value="Connexion">
</form>
<iframe src="" name="iframe-myAccount"></frame>
So, my question is simple: How can I open the form action url in an iframe which is in another html page?
As far as I know, there is no way to access that iFrame directly. I think you'll have to pass the data to the parent and then have it adjust the URL for the embedded iFrame. I'd probably do this through server-side scripting, but you may be able to do it through JavaScript.
This is my parent form parent-form.html with one submit button.
<form name="parent_form">
Name
<input type="text" id="name" name="name">
<input type="submit" id="submit" type="button" value="Submit"></button>
</form>
<iframe src="iframe_form.html" id="iframe_id" name="iframe_name"></iframe>
This is my iframe form iframe_form.html with one field in it.
<form name="iframe_form">
Address
<input type="text" id="address" name="address">
</form>
I want to submit both address field of iframe as well as name field of parent-form by clicking submit button of parent form.
There were other post related but none appropriate with simple method.
There's nothing wrong with iFrames but in this case, it's not efficient or easy.
If you want to avoid the problem of frames and forms, then use a scrollable division:
<div id="scrollcontent1" style="overflow-y: scroll; height:100px;">
Address: <input type="text" id="address" name="address">
</div>
If you want to have more than one on your page, use a sequence of them making sure the ID has a different name for each. You can then dynamically present what you need using the visible property and whatever javascript triggers you desire. Make sure you set the height property and if you want both scrollbars present, use overflow instead of overflow-y. It's a simple solution and it avoids the headaches of jquery as well as iframes.
Ihope you will get better mileage out of a helpful answer than and snobbish "ask the right question".
I have several sections in my page that I need to include under the same form tag, but doing so breaks the HTML. For example:
<div>
<form name="firstform">
<input type="text" name="input1" />
<input type="text" name="input2" />
<input type="text" name="input3" />
</div>
<p>bla bla</p>
<div>
<form name="secondform">
<input type="text" name="one" />
</form>
<input type="text" name="input4">
</form>
So basically I want to submit the form firstform but in a way that will include input4 but without submitting secondform?
EDIT:
I have a pretty long page with a lot of inputs, in the middle of the page I have a different form that is used to allow file upload which I want to keep where it is in the page, however, after that section I have a continuation of the first form. so I have the first form, then another form with the file upload and then the rest of the first form.
If you want to have multiple forms, use one form tag with multiple submit buttons. Give to the buttons name and value and its time a user submit the form, chech in the back end which button has been pushed.
You could simply add an html button with an onClick event that calls a function to mimic a nested form. If the second form's onSubmit function is pure javaScript this could be a quick cut/paste. If your second form is communicating with a server you'll have to jump into some AJAX.
I have just started HTML5 and want to know in general if we should use one <form> tag per web page or multiple form tags.
Maybe it depends on the situation, but here are two different scenarios:
One Sign Up form
A home page with multiple sub forms: Login, Join Mailing List, etc.
Is it bad to have a form tag inside another or is it ok per standards?
Thanks
Edit
Can you please explain in a simple way what the purpose of the form tag is?
I feel like you've already answered your questions.
One sign up form = one form tags.
Multiple forms = many form tags.
Just don't nest them.
EDIT
Form tags are meant to hold a variety of fields (i.e. input tags) that you will eventually pass to a target URL using a GET or POST request.
Take this login form, for example:
<form action="login.php">
<input id="name" type="text" name="name">
<input id="passwd" type="password" name="passwd">
<input type="submit" value="Login">
</form>
This has a login, a password, and a submit button. When the "Login" button (type = "submit") is pressed, the form will take that information and send it to another URL (in this case, "login.php", and that URL will handle the information accordingly (e.g. validate, sign you in, display captcha).
There is no reason why you can't have multiple forms on a single page. You just can't nest forms, because then the forms aren't able to identify which fields are for what.
Conceptually, if you need to have the information for two forms occupy the same section or area on your site (for example, if you were combining your sign-up and email list forms or something), you would use a single form and sort out the information from the POST variable on the other end. So long as you name things in a way that makes sense, you shouldn't even want nested forms to accomplish this.
Edit:
To further answer your question, a form tag, in its most basic use case, is used to submit data to a URL. The URL you choose to submit a form to typically receives that data and processes it in some way before taking action on that data, like storing the data in a database, or creating a new user based on a given username and password.
Putting forms inside forms doesn't make sense, how would you differentiate the fields inside each form now? Are they part of the master form? The child form? Both?
Separate forms for each area that you will need to read input from is best practice. If you have a login area, make a form for it. If you also have a comment area on that page, a separate form should handle that event.
Yes, we can use multiple tags inside one single HTML page. Sometimes we need to submit two distinct data from a single HTML page. To do so we need to use multiple tags. We use a tag to send our data to a particular servlet or JSP (in case of JAVA). We provide information about the client through the . there is an attribute inside the tag called as action="#". We defined the particular servlet name where the data inside the must go.Thus we provide data from a client (HTML) to a servlet (server). Then the servlet manipulates the provided data like inserting the data into the database. The following code can be a help to understand. Here two tags are used for two different task, and also they will be handled by two different servlets.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Registration | Badhon</title>
<link rel="stylesheet" type="text/css" href="registration.css">
</head>
<body background="images/registration.jpg">
<div class="title">
<h1>Registration</h1>
</div>
<div class="container">
<div class="left">
<div><h1>Choose an image (300*300)</h1></div>
/* First Form tag ---------------------*/
<form name="fileform" method="post" action="uploadImage" enctype="multipart/form-data">
<br> <label for="photo"> Portrait Photo: </label> <input
type="file" name="photo" size="50" placeholder="Upload Your Image"
required /><br>
<br> <input type="submit" value="Save">
</form>
/* End of First Form Tag---------------------*/
</div>
<div class="right">
<div class="formbox">
/* Second Form tag------------------ */
<form action="DonarRegister">
<p>Name</p>
<input type="text" name="name" placeholder="Name">
<p>Username</p>
<input type="text" name="username" placeholder="User_name">
<p>Password</p>
<input type="Password" name="password" placeholder="..........">
<p>Blood Group</p>
<input type="text" name="bloodgroup" placeholder="O positive">
<p>Age</p>
<input type="number" name="age">
<p>Mobile Number</p>
<input type="text" name="mobilenumber" placeholder="......">
<p>email</p>
<input type="text" name="email" placeholder="......">
<p>Address</p>
<input type="text" name="address" placeholder="Village/Thana/District">
<input type="submit" name="" value="Register">
<p> <h5>Have already an account !! Then just login</h5></p>
</form>
/* End of Second form tag ----------------- */
</div>
</div>
</div>
</body>
</html>
database and so on.