I made a form in my PHP / jQuery Mobile web application with this HTML.

```
<form action="<?= $_SERVER['REQUEST_URI'] ?>">

    <!-- data received from a previously submitted form -->
    <input type="hidden" name="firstName" value="<?= $firstName ?>" />
    <input type="hidden" name="lastName" value="<?= $lastName ?>" />

    <div data-role="fieldcontain">
        <label for="favoriteWord">Favorite Word:</label>
        <input type="text" name="favoriteWord" id="favoriteWord" value="" placeholder="Please tell us your favorite word." />
    </div>

    <input type="submit" name="submit" value="Submit Form" />
</form>

```

However, my submit button looks odd. It looks overlaid on itself (as my screen shot shows).

![enter image description here](https://i.stack.imgur.com/Abo4m.png)

Why?

This is the HTML I see when I do use `data-ajax="false"` (The problem still persists with ajax off) and hit "View Source".

```
<form action="/submitFavoriteWord">

    <!-- data received from a previously submitted form -->
    <input type="hidden" name="firstName" value="David" />
    <input type="hidden" name="lastName" value="Faux" />

    <div data-role="fieldcontain">
        <label for="favoriteWord">Favorite Word:</label>
        <input type="text" name="favoriteWord" id="favoriteWord" value="" placeholder="Please tell us your favorite word." />
    </div>

    <input type="submit" name="submit" value="Submit Form" />
</form>

```

---

Update: I analyzed the page in Chrome Web Developer. Here is what the Elements tab suggests jQuery Mobile is generating.

![enter image description here](https://i.stack.imgur.com/sKhgv.png)

Strangely, there is a `<span>` tag generated above my submit button.