1

All,

Recently I found out some HTML source for a user registration, a form like below:

<form action="/users" class="signup-form" data-url="/users/current" id="new_user" method="post">
    <input id="user_user_name" name="user[user_name]">
    <input id="user_password" name="user[password]">

    <input id="create-account-button" name="commit" type="submit" value="Create Account" />
</form>

My question is:

1) what does data-url here mean? 2) why put input field name as user[user_name], user[password] this kind of format? Shouldn't make the input name just as 'user_name' and 'password' easier? I mean, this must relate to a data model user, so naming in this way will be better for server processing.

Could anyone tell me if this is new HTML feature or jQuery feature? I did lots of search online, but I couldn't find out answer. Could you pelase give me any link or tutorial for this new html format submission?

Many thanks. Sam

Daniel A. White
  • 187,200
  • 47
  • 362
  • 445
Hai Lin
  • 57
  • 1
  • 1
  • 3
  • the data-url attribute itself is an HTML5 feature, but it has nothing to do with the form or how the form is processed. the naming of the inputs has nothing to do with javascript or html, though it *might* impact how the server handles it, but we can't tell without seeing server code. – Kevin B May 23 '13 at 19:33
  • http://stackoverflow.com/questions/10026252/post-to-data-url-are-there-any-use-cases might give you the better picture. – Faron May 23 '13 at 19:34
  • Why was this closed? – Catskul Oct 13 '14 at 19:07

5 Answers5

4

  • data-* attributes are part of HTML5. They are up to the implementor's to decide on what they mean.

  • the format of the name attributes is also arbitrary. its up to the framework on the server side to process it.

Daniel A. White
  • 187,200
  • 47
  • 362
  • 445
  • Many thanks for all your prompt answer! This kind of naming convention such as name="user[password]" looks very popular at web page design. I've seen several website using this kind of naming convention. Could sever side be Ruby on Rails or Djagon? – Hai Lin May 23 '13 at 20:00
  • @HaiLin i've seen it with asp.net mvc, but there's no real telling. – Daniel A. White May 23 '13 at 20:09
3

It is a new in the HTML5 spec. It is a way to add custom attributes to your tags and have your docs still pass validation.

http://html5doctor.com/html5-custom-data-attributes/

eidsonator
  • 1,319
  • 2
  • 11
  • 25
0

Pages often include additional meta information intended to be processed by client side applications. This data has no special meaning other than what the application author wanted it to mean.

In earlier versions of HTML, page authors would use arbitrary attribute names to pass these attributes. This would cause problems for page validators.

In HTML5, W3C introduced data-XXX attributes as a namespace to allow this data to be passed without risking it clashing with proper element attributes.

Such values can (in compliant browsers) be accessed via the el.dataset property.

Alnitak
  • 334,560
  • 70
  • 407
  • 495
0

data came with html5, that is used for when you need a custom html attribute.

Example you need a attribute to hold the name of some persons, doing this is not valid:

<inpu type="text" name="carlos" id="whatever"/>.

But doing this, browser will acepte that attribute :D.

<input type="text" data-name="carlos" id="whatever"/>.
Ligth
  • 330
  • 1
  • 9
0

It looks like it might make things move faster on the page.

Here is a link I found:

http://www.shawnmclean.com/blog/2011/02/how-can-html5-data-attributes-data-helps-efficiency/

lockedown
  • 594
  • 6
  • 15