0

I've just begin work on a mobile version for one of my sites.

I've set up my sign up form for my users. It worked fine and the CSS styled it correctly.

@using (Html.BeginForm("XXX", "Registration", FormMethod.Post, new { @class = "twitter-sign-in-container" }))
{
    <input type="submit" name="twitter-button" value="Sign in with Twitter" id="twitter-button" />
}

Once I added Jquery mobile to the project if found that random unstyled text started to show up.

On inspection I found that all input submits where being wrapped in new tags and adding un tagged text == to the inputs "Value":

<form action="/registration/xxx" class="twitter-sign-in-container" method="post">
    <div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
            "Sign in with Twitter"
            <input type="submit" name="twitter-button" value="Sign in with Twitter" id="twitter-button">
    </div>
</form>

Does anyone have any clue as to why the "sign up with twitter" text is being added, and how i stop it?

P.S Less important but I'd also like to know why Jquery wraps form contents in the bellow div.

Jack Dalton
  • 3,536
  • 5
  • 23
  • 40

2 Answers2

1

First, let me give you general advice, before using any framework (at least for the first time) you should at least look at frameworks official documentation. In this case it would save you time from posting this question.

Now let me answer your question. jQuery Mobile, just like many other mobile frameworks, has its own set of widgets, including customized form elements. What you see is just jQuery Mobile replacement for common button. It is much easier to create fully responsive button from scratch then to change preexisting form element. I can't think of any jQuery Mobile element/widget which is done directly on native HTML element.

If you don't like this look and feel you can easily disable it by adding data-role="none" to your input button. Take a look here if you want to see a difference: http://jsfiddle.net/Gajotres/vds2U/83/

Classic:

<input type="submit" name="twitter-button" value="Sign in with Twitter" id="twitter-button" data-role="none"/>

jQuery Mobile styled:

<input type="submit" name="twitter-button" value="Sign in with Twitter" id="twitter-button"/>

Of course there are other methods of markup enhancement prevention but it is not point of this question, if you want to find out more then take a look here (search for chapter called: Methods of markup enhancement prevention).

Regarding your last question, not all content is wrapped in this kind of a div container (.ui-button), there are many many other. Take a look here if you want to see other possible form/page elements (widgets).

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
0

I believe jQuery Mobile does this for accessibility reasons:

From here:

For the sake of accessibility, jQuery Mobile requires that all form elements be paired with a meaningful label. To hide labels in a way that leaves them visible to assistive technologies — for example, when letting an element's placeholder attribute serve as a label — apply the helper class ui-hidden-accessible to the label itself:

<label for="username" class="ui-hidden-accessible">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username"/>

Also, from here:

To collect standard alphanumeric text, use an input with a type="text" attribute. Set the for attribute of the label to match the id of the input so they are semantically associated. It's possible to accessibly hide the label if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.

Orlando Rincón
  • 547
  • 2
  • 6