Is it bad to wrap entire html document in <form>? - html

I have a database front-end that has several text fields for input on top of the page using post, and a pagination bar at the bottom of the page that uses the post method as well.
I've encapsulated the top inputs in
<form method = 'post'>
<Body>
//Inputs
//Table contents
//Pagination bar buttons
</Body>
</Form>
, but I've also extended the form so the form extends to the bottom of the document. (Database table is returned in middle of document) If I start a new form tag, the request will not include the previously entered text fields on the top, only the input inside the bottom form, so I can't use two forms.
<Html>
<Form method ='post'>
//Inputs
</Form>
//Table results
<Form method = 'post'>
//Pagination bar buttons
</Form>
</Html>
This will not work.
I want to ask, is it ok to encapsulate entire html doc in form tag? I don't want the client to send the entire doc in post or something.

If you mean this, that's fine:
<!DOCTYPE html>
<html>
<head>
<title>This is OK</title>
</head>
<body>
<form>
Everything
</form>
</body>
</html>
But
<form>
<!DOCTYPE html>
<html>
<head>
<title>Yes this is bad</title>
</head>
<body>
Something
</body>
</html>
</form>
or
<!DOCTYPE html>
<form>
<html>
<head>
<title>Yes this is bad</title>
</head>
<body>
Something
</body>
</html>
</form>
Is just invalid.

The only thing(s) that will be submitted in a form are values associated with input tags. So the entire document won't be submitted in the form. Only values associated with inputs.
Whether or not your design is "a bad idea" is hard to tell with the information given. I am unable to tell why exactly your pagination bar needs to be a form at all (rather than a link) but again, if you're worried about the entire document submitting in the form, that won't happen.

Related

Send only <Form> tag block from thymeleaf template

I am super new to thymeleaf. This is my HTML template which is used. But on some occasions, I only need the block to send to other ends without sending the whole HTML template. Is there a way to get only the form fragment? Thanks in advance.
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>LTI Launch</title>
<script type="text/javascript">
</script>
</head>
<body>
<div id="prepage">
<form th:action="${url}" th:method="${method}" id="blti-link-view">
...
</form>
</div>
</body>
</html>
I tried HTML fragments but to set attributes
<html xmlns:th="http://www.thymeleaf.org">
had to put. So when I try to get only the fragment above HTML block came along.
I need to get only a form block and send it as a response without sending the whole html block.

Create a Download link with user input placed in the middle of link

I wish to generate a download link button with user input replacing certain text in the link it's self.
http://linkhere/folder/foder/folder/InvoiceEnquiry.action?getPDF=&invoiceNumber=(User input result placed here)&criteria.invoiceType=INVOICE
Is this possible. I can use html code to get to the userinput but not to place the final part of the link after it prior to clicking the download button.
HTML Codes online
Form Builder
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.location.replace("First part of link"+inputvalue");
});
});
</script>
</head>
<body>
<input type="text" value="002" id="input">
<button type="button" id="button">Click Me!</button>
</body>
</html>
Generated full download link with the users input and the extension of the link placed afterwards to have a complete download link
First off, you don't need JQuery for this. Vanilla JS would work fine. Just wrap the redirect in a function and call the function with the HTML "onclick" attribute on the button element. Then you can get rid of the JQuery script, unless something else needs it.
Secondly the replace() method takes two arguments. You're giving it one concatenated string (the + operator used in this way is for combining strings).
window.location.replace("(User input result placed here)", inputvalue");
That will work if (User input result placed here) doesn't change.

Google Plus Text Share Button

I am trying to create a simple google plus post page that take text from text box and when click on google sharing button text will be posted automatically. Here is my code I am using.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Forms</title>
</head>
<body>
<form>
<div>
<label for="example">Let's submit some text</label>
<input id="example" type="text" name="text">
</div>
<div>
<g:plus action="share"></g:plus>
<script >
window.___gcfg = {
lang: 'zh-CN',
parsetags: 'onload'
};
</script>
<script src="https://apis.google.com/js/client:platform.js" async defer></script>
</div>
</form>
</body>
</html>
Its a simple html page. I use form submit option. I am beginner, so I am not exactly getting why it did not take text from text box.
The only configurable content attribute for the Google+ share button is data-href and it goes directly on <g:plus action="share" data-href="https:/example.com"></g:plus>. The only other configuration the share button supports is for how it will be displayed.
The Google+ share button only supports sharing URLs and does not support sharing text.
You could try using interactive posts but they require a lot more setup and a call to action.

Nested form tag behavior

I know you 'should not' do this but I noticed something interesting with forms nested within a parent form element. If you have mulitple forms the rendering engine seems to strip out the first child form then remove all other child forms and add them after the closing form tag of the parent. Why does the rendering engine behave this way? Tested in Chrome and Firefox:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Form Test 1</h2>
<form id="form1">
<form id="form2">
</form>
<form id="form3">
</form>
<form id="form4">
</form>
</form>
</body>
</html>
If you open this in a browser form 2 will be removed and all others added after form 1.

HTML - form tag bringing you to a website

How would you do this with form ()?
Make a text box and a Submit button.
You type anything in the textbox and Submit will open a website in your browser with a link of: (example) test.com/TextTheyPutHere.
Basically, if I put 'lol' in the textbox, it would open a website test.com/lol.
Please help.
Try this:
<!DOCTYPE html>
<html>
<head>
<script>
function newDoc() {
window.location.assign("http://www.yourVeryOwnSitez.com/"+document.myForm.myDestination.value)
}
</script>
</head>
<body>
<form method="post" name="myForm">
<input type="text" name="myDestination">
<input type="button" value="Gogogo" onclick="newDoc()">
</form>
</body>
</html>
Then edit line 7 and put your particular url in the place of "www.yourVeryOwnSitez.com".