Nested form tag behavior - html

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.

Related

How to create html form that directly goes to specific search on a website?

I know that the code below will go to the result page of google when the user types some texts and the submit button is clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Hello!
</title>
</head>
<body>
<form action="https://www.google.com/search" method="get">
<input name="q" type="text">
<input type="submit" value="Submit Form">
</form>
</body>
</html>
But I try this with https://www.jitta.com/. It does not seem to have the same structure as google.
When searching on this website the url will be https://www.jitta.com/stock/bkk:ptt where "ptt" is the word that I want to search. Unlike google, if I want to search "ptt" the url will be https://www.google.com/search?q=ptt.
Can it be only HTML code? no other parts involved (like Javascript,...)
Appreciate anyone who answers this.

Forms not clickable inside div in HTML

I am writing an app in Django and it works perfectly fine when not including divs but when including divs, I cannot click on any forms or texts after the post request (weirdly, it works fine before the post request).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Some title</title>
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-0.13.0.min.css" type="text/css" />
</head>
<body>
<div style="width:1200px;">
<div style="width:300px; float:left;">
{% block content %}
<form method="post" action="">
{% csrf_token %}
<table>
{{ form.as_table }}
</table>
<input type="submit" value="Calculate"/>
</form>
<li>Some text</li>
{% endblock %}
</div>
<div style="width:900px; float:right"; >
Some text
</div>
</div>
<body>
</html>
I am very new to HTML but I read that it is related to CSS somehow but I want to avoid fiddling with that when using Django.
The <body> tag should go immediately after <head>. Close out the <body> tag at the end of your code.
There are some conventions which need to follow while working in HTML.
we write html just like xml (Open tag and closing tag)
html tag is the root element of DOM
In html, we have two major tags: head and body
In head, we normally add dependencies tags required to our web page and meta data of our page and this part this not visible to user in browser's view
In body, we write code that we can see in browser
divs, spans, input fields, forms and all other tags should be inside the body
So according to 1 - 6, you are violating the conventions of html. You need to include your all div tags under body

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

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.

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".

Tab (keyboard) navigation in a page which contains iframe

I have a page with iframe. The iframe contains input elements. When the user places the cursor into the first input textbox in the iframe and presses the tab key, the focus jumps out from the iframe and the next element in the parent page gets the focus. (instead remaining in the iframe, and place to focus on the 2nd input element.)
I've tried to place tabIndex attribute for the input elements with no effect.
I would like to ensure the input elements in the iframe can be accessed by pressing tab key.
* Begin Edit
Risking the minuses, but I have to share my opinion...
I recognized answering this question is this is not obvious.Regarding the UX consequences of this behavior: Seeing the browsers and html/css we still have these white holes what are teleport us to the stone-age of UI/IX: the 80s and early 90s...
Just place yourself into the situation of an end user, who tries to navigate between UI elements using the tab key...
End Edit *
...sorry if one felt be offended because there is not obvious answer for this in the age of HTML 6+... I think instead we should solve or workaround this to ensure enduser UX.... or is not this reproducable? Please let me know if I missed something.
Please consider this simple example that contradicts your claim. Tab works correctly navigating through form elements of both child frame and parent frame.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Outer Frame</title>
<style>
.iframe-wrapper {
height: 80px;
}
</style>
</head>
<body>
<div class="iframe-wrapper">
<iframe id="myInnerFrame" src="./inner-frame.html" frameborder="0" width="100%" height="100%"></iframe>
</div>
<input type="button" value="No, press me!">
</body>
</html>
And inner-frame.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inner Frame</title>
<style>
.wrapper {
border: 2px solid #f0f0f0;
}
</style>
</head>
<body>
<div class="wrapper">
<div>Hello, world. I am iframe.</div>
<input type="text" name="" id="" value="Write in me">
<input type="button" value="Press me">
</div>
</body>
</html>
Tested on Windows with Chrome, Firefox and IE - all latest versions.
I've also made a JS fiddle to demonstrate it. But for some reason for iframe to render you need to press Run first. http://jsfiddle.net/zecu3yvn/