How to place the cursor (auto focus) in text box when a page gets loaded without javascript support?

CssHtml

Css Problem Overview

I have a form with some text fields,and I want to place the cursor (auto focus) on first text field of form when page gets loaded.

I want to do it without using javascript.

Css Solutions

Solution 1 - Css

Ya its possible to do without support of javascript..
We can use html5 auto focus attribute
For Example: 

<input type="text" name="name" autofocus="autofocus" id="xax" />

If use it (autofocus="autofocus") in text field means that text field get focused when page gets loaded.. For more details:
http://www.hscripts.com/tutorials/html5/autofocus-attribute.html

Solution 2 - Css

Just add autofocus in first input or textarea.

<input type="text" name="name" id="xax" autofocus="autofocus" />

Solution 3 - Css

This will work:

OnLoad="document.myform.mytextfield.focus();"

Solution 4 - Css

<body onLoad="self.focus();document.formname.name.focus()" >

formname is <form action="xxx.php" method="POST" name="formname" >
and name is <input type="text" tabindex="1" name="name" />

it works for me, checked using IE and mozilla.
autofocus, somehow didn't work for me.

Solution 5 - Css

An expansion for those who did a bit of fiddling around like I did.

The following work (from W3):

<input type="text" autofocus />
<input type="text" autofocus="" />
<input type="text" autofocus="autofocus" />
<input type="text" autofocus="AuToFoCuS" />

It is important to note that this does not work in CSS though. I.e. you can't use:

.first-input {
    autofocus:"autofocus"
}

At least it didn't work for me...

Solution 6 - Css

very easy you can just set the attribute autofocus to on in the wanted input

<form action="exemple.php"  method="post">
   <input name="wantedInput" autofocus="on">
   <input type="submit" value="go"  >
</form>

Solution 7 - Css

Sometimes all you have to do to make sure the cursor is inside the text box is: click on the text box and when a menu is displayed, click on "Format text box" then click on the "text box" tab and finally modify all four margins (left, right, upper and bottom) by arrowing down until "0" appear on each margin.

Categories
Recommended Css Solutions
Recommended Html Solutions

Previous Solution:

Python setuptools: How can I list a private repository under install_requires?

PythonGithubSetuptools

Next Solution:

What size should TabBar images be?

IosObjective CUitabbarcontrollerUitabbarUitabbaritem

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionThavamani KasiView Question on Stackoverflow
Solution 1 - CssThavamaniView Answer on Stackoverflow
Solution 2 - CssRajnikant KakadiyaView Answer on Stackoverflow
Solution 3 - CssVishalView Answer on Stackoverflow
Solution 4 - CssdewazView Answer on Stackoverflow
Solution 5 - CssAERView Answer on Stackoverflow
Solution 6 - Csskamal doumaView Answer on Stackoverflow
Solution 7 - CssMarisela SainzView Answer on Stackoverflow