Chrome supports the [placeholder attribute][1] on `input[type=text]` elements (others probably do too).

But the following CSS doesn&#39;t do anything to the placeholder&#39;s value:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;


    input[placeholder], [placeholder], *[placeholder] {
        color: red !important;
    }


&lt;!-- language: lang-html --&gt;


    &lt;input type=&quot;text&quot; placeholder=&quot;Value&quot;&gt;

&lt;!-- end snippet --&gt;

But `Value` will still remain `grey` instead of `red`.

**Is there a way to change the color of the placeholder text?**


  [1]: http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-placeholder-attribute &quot;The placeholder attribute&quot;

Change a HTML5 input&#39;s placeholder color with CSS

In which format should I put the date and time, for use in the HTML5 input element with `datetime` type?

I have tried:

 - `1338575502`
 - `01/06/2012 19:31`
 - `01/06/2012 19:21:00`
 - `2012-06-01`
 - `2012-06-01 19:31`
 - `2012-06-01 19:31:00`

None of them seem to work.

Input type DateTime - Value format?

HTML5 appears to support a new range of [input fields](http://diveintohtml5.info/forms.html) for [things such as](http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#states-of-the-type-attribute):

* Numbers
* Email addresses
* Colors
* URLs
* Numeric range (via a slider)
* Dates
* Search boxes

Has anyone implemented `HtmlHelper` extension methods for ASP.NET MVC that generates these yet?  It&#39;s possible to do this using an overload that accepts `htmlAttributes`, such as:

    Html.TextBoxFor(model =&gt; model.Foo, new { type=&quot;number&quot;, min=&quot;0&quot;, max=&quot;100&quot; })

But that&#39;s not as nice (or typesafe) as:

    Html.NumericInputFor(model =&gt; model.Foo, min:0, max:100)



ASP.NET MVC HTML helper methods for new HTML5 input types

For all default inputs, the text you fill starts on the left. How do you make it start on the right?

How to align texts inside of an input?

I have an `input type=&quot;image&quot;`. This acts like the cell notes in Microsoft Excel. If someone enters a number into the text box that this `input-image` is paired with, I setup an event handler for the `input-image`. Then when the user clicks the `image`, they get a little popup to add some notes to the data.

My problem is that when a user enters a zero into the text box, I need to disable the `input-image`&#39;s event handler. I have tried the following, but to no avail.

    $(&#39;#myimage&#39;).click(function { return false; });

Best way to remove an event handler in jQuery?

I am working on a search with JavaScript. I would use a form, but it messes up something else on my page. I have this input text field:

    &lt;input name=&quot;searchTxt&quot; type=&quot;text&quot; maxlength=&quot;512&quot; id=&quot;searchTxt&quot; class=&quot;searchField&quot;/&gt;

And this is my JavaScript code:

    &lt;script type=&quot;text/javascript&quot;&gt;
      function searchURL(){
        window.location = &quot;http://www.myurl.com/search/&quot; + (input text value);
      }
    &lt;/script&gt;

How do I get the value from the text field into JavaScript?


How do I get the value of text input field using JavaScript?

What are the ways to get and render an input value using jQuery?

Here is one: 

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    $(document).ready(function() {
      $(&quot;#txt_name&quot;).keyup(function() {
        alert($(this).val());
      });
    })

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;input type=&quot;text&quot; id=&quot;txt_name&quot; /&gt;

&lt;!-- end snippet --&gt;



Get the value in an input text box

I have tried ([JSFiddle][1]):

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;input type=&quot;date&quot; value=&quot;2012-3-23&quot;&gt;

&lt;!-- end snippet --&gt;

but it doesn&#39;t work, how can I set the default value?


  [1]: http://jsfiddle.net/VD2QH/2/

How to set default value to the input[type=&quot;date&quot;]

Is there a way to force the number keyboard to come up on the phone for an `&lt;input type=&quot;text&quot;&gt;`? I just realized that [`&lt;input type=&quot;number&quot;&gt;`](http://www.w3.org/TR/html-markup/input.number.html) in HTML5 is for “floating-point numbers”, so it isn’t suitable for credit card numbers, ZIP codes, etc.

I want to emulate the numeric-keyboard functionality of `&lt;input type=&quot;number&quot;&gt;`, for inputs that take numeric values other than floating-point numbers. Is there, perhaps, another appropriate `input` type that does that?

Phone: numeric keyboard for text input

&lt;!-- language: lang-js --&gt;

    $(document).ready(function() {
        // #login-box password field
        $(&#39;#password&#39;).attr(&#39;type&#39;, &#39;text&#39;);
        $(&#39;#password&#39;).val(&#39;Password&#39;);
    });

This is supposed to change the `#password` input field (with `id=&quot;password&quot;`) that is of `type` `password` to a normal text field, and then fill in the text “Password”.

It doesn’t work, though. Why?

Here is the form:

&lt;!-- language: lang-html --&gt;

    &lt;form enctype=&quot;application/x-www-form-urlencoded&quot; method=&quot;post&quot; action=&quot;/auth/sign-in&quot;&gt;
      &lt;ol&gt;
        &lt;li&gt;
          &lt;div class=&quot;element&quot;&gt;
            &lt;input type=&quot;text&quot; name=&quot;username&quot; id=&quot;username&quot; value=&quot;Prihlasovacie meno&quot; class=&quot;input-text&quot; /&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div class=&quot;element&quot;&gt;
            &lt;input type=&quot;password&quot; name=&quot;password&quot; id=&quot;password&quot; value=&quot;&quot; class=&quot;input-text&quot; /&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class=&quot;button&quot;&gt;
          &lt;div class=&quot;button&quot;&gt;
            &lt;input type=&quot;submit&quot; name=&quot;sign_in&quot; id=&quot;sign_in&quot; value=&quot;Prihl&#225;siť&quot; class=&quot;input-submit&quot; /&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ol&gt;
    &lt;/form&gt;


change type of input field with jQuery

I actually have a file input and I would like to retrieve the Base64 data of the file.

I tried:

    $(&#39;input#myInput&#39;)[0].files[0] 

to retrieve the data. But it only provides the name, the length, the content type but not the data itself.

I actually need these data to send them to Amazon S3

I already test the API and when I send the data through html form with encode type &quot;multipart/form-data&quot; it works.

I use this plugin : http://jasny.github.com/bootstrap/javascript.html#fileupload

And this plugins gives me a preview of the picture and I retrieve data in the src attribute of the image preview. But when I send these data to S3 it does not work. I maybe need to encode the data like &quot;multipart/form-data&quot; but I don&#39;t know why.

Is there a way to retrieve these data without using an html form?

Get data from file input in JQuery

I&#39;ve an HTML INPUT field.

    &lt;input 
        [(ngModel)]=&quot;item.value&quot; 
        name=&quot;inputField&quot; 
        type=&quot;text&quot; 
    /&gt;

and I want to format its value and use an existing pipe:

    .... 
    [(ngModel)]=&quot;item.value | useMyPipeToFormatThatValue&quot; 
    ....

and get the error message:

&gt; Cannot have a pipe in an action expression


How can I use pipes in this context?   


Using Pipes within ngModel on INPUT Elements in Angular

I made an HTML page that has an `&lt;input&gt;` tag with `type=&quot;text&quot;`. When I click on it using Safari on iPhone, the page becomes larger (auto zoom). Does anybody know how to disable this?




Disable Auto Zoom in Input &quot;Text&quot; tag - Safari on iPhone

Among other text and visual aids on a form submission, post-validation, I&#39;m coloring my input boxes red to signify the interactive area needing attention.

On Chrome (and for Google Toolbar users) the auto-fill feature re-colors my input forms yellow. Here&#39;s the complex issue: I want auto-complete allowed on my forms, as it speeds users logging in. I am going to check into the ability to turn the autocomplete attribute to off if/when there&#39;s an error triggered, but it is a complex bit of coding to programmatically turn off the auto-complete for the single affected input on a page. This, to put it simply, would be a major headache.

So to try to avoid that issue, is there any simpler method of stopping Chrome from re-coloring the input boxes?

[edit] I tried the !important suggestion below and it had no effect. I have not yet checked Google Toolbar to see if the !important attribute would work for that.

As far as I can tell, there isn&#39;t any means other than using the autocomplete attribute (which does appear to work).

How do I stop Chrome from yellowing my site&#39;s input boxes?

Im building web app which is mainly for mobile browsers. Im using input fields with number type, so (most) mobile browsers invokes only number keyboard for better user experience. This web app is mainly used in regions where decimal separator is comma, not dot, so I need to handle both decimal separators.

How to cover this whole mess with dot and comma?


My findings:

**Desktop Chrome**

- Input type=number
- User enters &quot;4,55&quot; to input field 
- `$(&quot;#my_input&quot;).val();` returns &quot;455&quot;
- I can not get the correct value from input


**Desktop Firefox**

- Input type=number
- User enters &quot;4,55&quot; to input field 
- `$(&quot;#my_input&quot;).val();` returns &quot;4,55&quot;
- Thats fine, I can replace comma with dot and get correct float


**Android browser**

- Input type=number
- User enters &quot;4,55&quot; to input field 
- When input loses focus, value is truncated to &quot;4&quot;
- Confusing to user

**Windows Phone 8**

- Input type=number
- User enters &quot;4,55&quot; to input field 
- `$(&quot;#my_input&quot;).val();` returns &quot;4,55&quot;
- Thats fine, I can replace comma with dot and get correct float


What are the &quot;best practices&quot; in this kind of situations when user might use comma or dot as decimal separator and I want to keep html input type as number, to provide better user experience?

Can I convert comma to dot &quot;on the fly&quot;, binding key events, is it working with number inputs?



EDIT
----

Currenlty I do not have any solution, how to get float value (as string or number) from input which type is set to number. If enduser enters &quot;4,55&quot;, Chrome returns always &quot;455&quot;, Firefox returns &quot;4,55&quot; which is fine.

Also it is quite annoying that in Android (tested 4.2 emulator), when I enter &quot;4,55&quot; to input field and change focus to somewhere else, the entered number get truncated to &quot;4&quot;.

How to handle floats and decimal separators with html5 input type number

I have a checkbox that, given certain conditions, needs to be disabled. Turns out HTTP doesn&#39;t post disabled inputs.

How can I get around that? submitting the input even if it&#39;s disabled and keeping the input disabled?

how to POST/Submit an Input Checkbox that is disabled?

    $input.disabled = true;

or 

    $input.disabled = &quot;disabled&quot;;

Which is the standard way? And, conversely, how do you enable a disabled input?

Disable/enable an input with jQuery?

When using the HTML `&lt;input&gt;` tag, what is the difference between the use of the `name` and `id` attributes especially that I found that they are sometimes named the same?

HTML input - name vs. id

How would you set the default value of a form `&lt;input&gt;` text field in JavaScript?



Set the value of an input field

I was wondering why all browsers, like Chrome versions higher than 26, which had support in the past for the input `datetime` removed it?

This sounds like a duplicate of [this article][1], but that one is quite aged.

It looks like the HTML WG prefers `datetime-local` ([w3c][2]) above `datetime` ([w3c][3]), but why?

See [this][4] for feature development timeline.

**What others say:**

According to [mobilexweb.com][5] it was deprecated in iOS &#39;because it looks too much like the datetime input type&#39;.

&gt; Following Google Chrome, now Safari on iOS doesn’t support the
&gt; datetime input type anymore and it will fallback to text. This type
&gt; was deprecated in the standard in favor of datetime-local or using two
&gt; inputs, date and time for the same purpose. The problem is that
&gt; datetime was compatible with iOS from version 5.0 to 6.1; if you are
&gt; using it, be careful!

**What is the difference?**

Where `datetime-local` contains only a date and time element, `datetime` also contains the time zone. This is useful since you might want to act differently when the client&#39;s time zone is different from the server&#39;s one.

**Why does this matter?**

&gt; What if the web page asks: when do you want me to call you, and the user selects &#39;tomorrow, 3pm&#39;, when do you need to call him back? tomorrow 3pm UTC or CET?


  [1]: https://stackoverflow.com/questions/13410883/why-all-major-browsers-not-support-html5-new-input-types-like-color-date-and-htm
  [2]: http://dev.w3.org/html5/markup/input.datetime-local.html
  [3]: http://dev.w3.org/html5/markup/input.datetime.html
  [4]: http://html5test.com/compare/feature/form-datetime-element/form-datetime-local-element.html
  [5]: http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

Why is HTML5 input type datetime removed from browsers already supporting it?

I&#39;m working on an ASP.net web application.

I have a form with a submit button.  The code for the submit button looks like `&lt;input type=&#39;submit&#39; value=&#39;submit request&#39; onclick=&#39;btnClick();&#39;&gt;`.

I want to write something like the following:

    function btnClick() {
        if (!validData())
            cancelFormSubmission();
    }

How do I do this?

How do I cancel form submission in submit button onclick event?

I have the following HTML structure and I am trying to use Selenium to enter a value of `NUM`:


    &lt;div class=&quot;MY_HEADING_A&quot;&gt;
        &lt;div class=&quot;TitleA&quot;&gt;My title&lt;/div&gt;
        &lt;div class=&quot;Foobar&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;PageFrame&quot; area=&quot;W&quot;&gt;				
                 &lt;span class=&quot;PageText&quot;&gt;PAGE &lt;input id=&quot;a1&quot; type=&quot;txt&quot; NUM=&quot;&quot; /&gt;  of &lt;span id=&quot;MAX&quot;&gt;&lt;/span&gt; &lt;/span&gt;
    &lt;/div&gt;


Here is the code I have written:

    head = driver.find_element_by_class_name(&quot;MY_HEADING_A&quot;)
    frame_elem = head.find_element_by_class_name(&quot;PageText&quot;)

    # Following is a pseudo code. 
    # Basically I need to enter a value of 1, 2, 3 etc in the textbox field (NUM) 
    # and then hit RETURN key.
    ## txt  = frame_elem.find_element_by_name(&quot;NUM&quot;)
    ## txt.send_keys(Key.4)

How to get this element and enter a value‎‎‎‎‎‎‎? ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎



How to locate and insert a value in a text box (input) using Python Selenium?

I have a mobile website and it has some HTML `input` elements in it, like this:

&lt;!-- language: lang-html --&gt;

    &lt;input type=&quot;text&quot; name=&quot;txtAccessoryCost&quot; size=&quot;6&quot; /&gt;

I have embedded the site into a [`WebView`](http://developer.android.com/reference/android/webkit/WebView.html) for possible Android 2.1 consumption, so that it will also be an Android application.

Is it possible to get the keyboard with numbers instead of the default one with letters when this HTML `input` element is focused?

Or, is it possible to set it for the whole application (maybe something in [the Manifest file](http://developer.android.com/guide/topics/manifest/manifest-intro.html)), if it is not feasible for an HTML element?


How to force keyboard with numbers in mobile website in Android

We all know how to form a checkbox input in HTML:

    &lt;input name=&quot;checkbox_name&quot; id=&quot;checkbox_id&quot; type=&quot;checkbox&quot;&gt;

What I don&#39;t know -- what&#39;s the technically correct value for a checked checkbox? I&#39;ve seen these all work: 

    

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;input name=&quot;checkbox_name&quot; id=&quot;checkbox_id&quot; type=&quot;checkbox&quot; checked&gt;
        &lt;input name=&quot;checkbox_name&quot; id=&quot;checkbox_id&quot; type=&quot;checkbox&quot; checked=&quot;on&quot;&gt;
        &lt;input name=&quot;checkbox_name&quot; id=&quot;checkbox_id&quot; type=&quot;checkbox&quot; checked=&quot;yes&quot;&gt;
        &lt;input name=&quot;checkbox_name&quot; id=&quot;checkbox_id&quot; type=&quot;checkbox&quot; checked=&quot;checked&quot;&gt;
        &lt;input name=&quot;checkbox_name&quot; id=&quot;checkbox_id&quot; type=&quot;checkbox&quot; checked=&quot;true&quot;&gt;

&lt;!-- end snippet --&gt;

Is the answer that it doesn&#39;t matter? I see no evidence for the answer marked as correct [here][1] from the [spec][2] itself:

&gt; Checkboxes (and radio buttons) are on/off switches that may be toggled
&gt; by the user. A switch is &quot;on&quot; when the control element&#39;s checked
&gt; attribute is set. When a form is submitted, only &quot;on&quot; checkbox
&gt; controls can become successful. Several checkboxes in a form may share
&gt; the same control name. Thus, for example, checkboxes allow users to
&gt; select several values for the same property. The INPUT element is used
&gt; to create a checkbox control.

What would a spec writer say is the correct answer? Please provide evidence-based answers.

  [1]: https://stackoverflow.com/questions/2874949/what-is-the-syntax-for-a-checked-checkbox-in-html
  [2]: http://www.w3.org/TR/html4/interact/forms.html

What&#39;s the proper value for a checked attribute of an HTML checkbox?

I&#39;m working on building new site, and I need a drop down menu to select the amount of something in my site. But at the same time I need this drop down list to accept text. So if the client wants to choose from the drop down list then he can, also if the client want to enter the amount by text then he can also. As you can see I want to make it dual.

For example: suppose there is an `amount` drop down menu, and its elements are (1,2,3);

Suppose now that the client needs the amount to be 5 - this is his right - it does not exist in the drop down list, so the client now must enter the amount textually.  So for any entry the client must either choose from the drop down list or enter the amount textually.

After the description of my problem, and the simple example that I have introduced to you, here is my question:

Is there HTML code to make a drop down menu and a text field in one, as dual, not separated?

Drop Down Menu/Text Field in one

I have a PHP script that will generate `&lt;input&gt;`s dynamically, so I was wondering if I needed to filter any characters in the `name` attribute.

&lt;s&gt;I know that the name has to start with a letter, but&lt;/s&gt; I don&#39;t know any other rules. I figure square brackets must be allowed, since PHP uses these to create arrays from form data. How about parentheses? Spaces?

What characters are allowed in the HTML Name attribute inside input tag?

I am trying to achieve this: 
![enter image description here][1]


  [1]: http://i.stack.imgur.com/JkDhx.png
I just want to show a button inside an input element just like the above image

How to add button inside input

I would like to change the color background in the text and input fields of a form, but when I do this it also affects the submit button! Could it be done in some other way that does not affect the button?

I have used this code:

    input, textarea {
      background-color: #d1d1d1;
    }


Background color in input and text fields

When looking at most sites (including SO), most of them use:

    &lt;input type=&quot;button&quot; /&gt;

instead of:

    &lt;button&gt;&lt;/button&gt;

 - What are the main differences between the two, if any?
 - Are there valid reasons to use one instead of the other?
 - Are there valid reasons to use combine them?
 - Does using `&lt;button&gt;` come with compatibility issues, seeing it is not very widely used?



&lt;button&gt; vs. &lt;input type=&quot;button&quot; /&gt;. Which to use?

On chrome, the &quot;search&quot; event is fired on search inputs when user clicks the clear button.

Is there a way to capture the same event in javascript on Internet Explorer 10?

![enter image description here][1]


  [1]: http://i.stack.imgur.com/2JjVS.png

Event fired when clearing text input on IE10 with clear icon

How do you make a button in Bootstrap 3 undepress automatically after being clicked?

To replicate my problem, make a page with some buttons, give them appropriate bootstrap classes (and include bootstrap):

    &lt;input id=&quot;one&quot; type=&quot;button&quot; class=&quot;btn btn-default&quot; value=&quot;one&quot;&gt;
    &lt;input id=&quot;two&quot; type=&quot;button&quot; class=&quot;btn btn-primary&quot; value=&quot;two&quot;&gt;

Load the page and click on one of the buttons.  It becomes depressed and highlighted until you click somewhere else on the page (using FF29 and chrome35beta).

Inspecting the input element while clicked and unclicked doesn&#39;t show any additional classes being attached and removed from it.

Here&#39;s an example of Bootstrap buttons staying depressed: http://jsfiddle.net/52VtD/5166/

How to stop buttons from staying depressed with Bootstrap 3

How can I target input fields of type &#39;text&#39; using CSS selectors? 

CSS selector for text input fields?

I’m trying to make a html5 form that contains one email input, one check box input, and one submit input.
I&#39;m trying to use the pattern attribute for the email input but I don&#39;t know what to place in this attribute. I do know that I&#39;m supposed to use a regular expression that must match the JavaScript Pattern production but I don&#39;t know how to do this.

What I&#39;m trying to get this attribute to do is to check to make sure that the email contains one @ and at least one or more dot and if possible check to see if the address after the @ is a real address. If I can&#39;t do this through this attribute then I&#39;ll consider using JavaScript but for checking for one @ and one or more dot I do want to use the pattern attribute for sure.

The pattern attribute needs to check for:

1. Only one @
2. One or more dot
3. And if possible check to see if the address after the @ is a valid address

An alternative to this one is to use a JavaScript but for all the other conditions I do not want to use a JavaScript.



HTML5 Email input pattern attribute

So I have a text input

    &lt;input type=&quot;text&quot; value=&quot;3&quot; class=&quot;field left&quot;&gt;

Here is my CSS for it

    background:url(&quot;images/number-bg.png&quot;) no-repeat scroll 0 0 transparent;
    border:0 none;
    color:#FFFFFF;
    height:17px;
    margin:0 13px 0 0;
    text-align:center;
    width:17px; 

Is there a setting or a trick to this, I was thinking of doing a label instead but how about the styling. How do I convert them and is there a better way or is that the only way?

How do I make a text input non-editable?

I got a form like this

```lang-html
&lt;form&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Titel&quot; name=&quot;levels[level]&quot;&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Titel&quot; name=&quot;levels[build_time]&quot;&gt;

    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Titel&quot; name=&quot;levels[level]&quot;&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Titel&quot; name=&quot;levels[build_time]&quot;&gt;
&lt;/form&gt;
```

I&#39;d like to have as $_POST output an array like:

```lang-none
Array (
  [1] =&gt; Array ( [level] =&gt; 1 [build_time] =&gt; 123 )
  [2] =&gt; Array ( [level] =&gt; 2 [build_time] =&gt; 456 )
)
```

I know I could do something like name=&quot;levels[1][build_time]&quot; and so on, but since these elements get added dynamically, it would be hard to add an index. Is there another way?

&lt;hr/&gt;

As suggested, I changed my form. I also included my whole HTML now, because I think I&#39;m missing something here. My HTML now:

```lang-html
&lt;div class=&quot;form-group&quot;&gt;
  &lt;label class=&quot;col-md-2&quot;&gt;Name(z.B. 1)&lt;/label&gt;
  &lt;div class=&quot;col-md-10&quot;&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Titel&quot; name=&quot;levels[][level]&quot;&gt;
  &lt;/div&gt;

  &lt;label class=&quot;col-md-2&quot;&gt;Bauzeit(In Sekunden)&lt;/label&gt;
  &lt;div class=&quot;col-md-10&quot;&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Titel&quot; name=&quot;levels[][build_time]&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;form-group&quot;&gt;
  &lt;label class=&quot;col-md-2&quot;&gt;Name(z.B. 1)&lt;/label&gt;
  &lt;div class=&quot;col-md-10&quot;&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Titel&quot; name=&quot;levels[][level]&quot;&gt;
  &lt;/div&gt;

  &lt;label class=&quot;col-md-2&quot;&gt;Bauzeit(In Sekunden)&lt;/label&gt;
  &lt;div class=&quot;col-md-10&quot;&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Titel&quot; name=&quot;levels[][build_time]&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;
```

The output I get now is:

```lang-none
[levels] =&gt; Array (
  [0] =&gt; Array ( [level] =&gt; 1 )
  [1] =&gt; Array ( [build_time] =&gt; 234 )
  [2] =&gt; Array ( [level] =&gt; 2 )
  [3] =&gt; Array ( [build_time] =&gt; 456 )
)
```

As suggested in your edit, I edited my form and moved the square brackets to the end of the name. The output I get now is:

```lang-none
[levels] =&gt; Array (
  [level] =&gt; Array (
    [0] =&gt; 1
    [1] =&gt; 2
  )
  [build_time] =&gt; Array (
    [0] =&gt; 234
    [1] =&gt; 456
  )
)
```

I guess that would kind of work, but it still looks complicated. Isn’t there a better way?






All Html Input Solutions on Gang of Coders

Total of 35 Html Input Solutions

Change a HTML5 input's placeholder color with CSS