Detalhes da questão

Endereço do fórum: http://pivot5.forumeiros.com/
Versão do fórum: PunBB

Descrição

Recentemente criei um formulário para fichas de personagem

Mas exatamente nesta parte da criação da ficha eu gostaria de adicionar um mostrador para indicar qual número está sendo selecionado:


Se precisar, este é o código da minha página html:

Código:

<div align="center">
   
   <table style="text-align: justify;">
       
      <tbody>
         
         <tr>
             
            <td>
                <script src="http://jscolor.com/jscolor/jscolor.js" type="text/javascript"></script>            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="http://ajuda.forumeiros.com/29110.js"></script>                <script src="http://ajuda.forumeiros.com/28074.js"></script>                <style>
            #generated_form .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#generated_form .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
#generated_form .image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
#generated_form .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
#generated_form .image { width: 300px; }
 
#generated_form h1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 2em;
font-weight: 400;
margin: .8em 0 .2em;
}
 
#generated_form dl {
   margin-bottom: 10px;
   font-size: 1.1em;
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}
 
#generated_form dt {
   width: 30%;
   padding-top: 5px;
   border: none;
   float: left;
}
 
#generated_form dd {
   padding: 5px;
   padding-right: 5px;
   margin-left: 30%;
   vertical-align: middle;
}
#generated_form dl:hover dt {
   color: #666;
}
 
#generated_form input {
   font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
   font-weight: normal;
   color: #333333;
   padding: 2px;
   vertical-align: middle;
   padding-left: 4px;
}
 
#generated_form input[disabled] {
   background-color:#ddd;
   cursor:pointer;
}
 
#generated_form select {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   font-weight: normal;
   font-style: normal;
   cursor: default;
   vertical-align: middle;
   width:auto;
   max-width:100%;/* Bug IE */
   padding: 1px;
}
 
#generated_form textarea {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   width: 300px;
   height: 100px;
   padding: 2px;
   padding-left: 4px;
   cursor: text;
}
 
#generated_form input[type=text], #generated_form input[type=fields_list] {
   width: 300px;
   cursor: text;
}
</style>       
               <form enctype="multipart/form-data" method="post" id="generated_form" action="/post" onsubmit="submit_form();">
                          <input value="1" name="form_mode" type="hidden" />       
                  <h1 data-type="field" style="text-align: center;">
                       <span style="font-family: Impact;"><span style="text-decoration: underline;">    Ficha de criação de Duelista:</span></span>     
                  </h1>
                   
                  <div>
                       <br /> 
                  </div>
                        <dl><dt style="text-align: right;"><strong>Nome:</strong></dt>                            <dd><input required="required" id="field1" value="" data-type="field" type="text" /></dd>                        </dl>     
                  <p data-type="field" style="text-align: center;">
                           <span style="font-size: 10px;"><em>O nome do seu duelista.</em></span>     
                  </p>
                        <dl><dt style="text-align: right;"><strong>Imagem:</strong></dt>                            <dd><input required="required" id="field2" value="" data-type="field" type="text" /></dd>                        </dl>     
                  <p data-type="field" style="text-align: center;">
                           <span style="font-size: 10px;"><em>Insira o apenas o direct link da imagem neste campo.</em></span>     
                  </p>
                        <dl>                            <dt style="text-align: right;"><strong>Poderes / Habilidades:</strong></dt>                            <dd><textarea required="required" id="field5" data-type="field"></textarea></dd>                        </dl>     
                  <p data-type="field">
                           <span style="font-size: 10px;"><em>Aqui você listará os poderes do seu Duelista [DL], ele pode ter no máximo 8 poderes e/ou armas.<br />Obs: Todos os lutadores ja vem incluso com habilidades básicas que são: Velocidade, Força e Agilidade fora do normal. </em></span>
                  </p>
                  
                  <p data-type="field">
                      <span style="font-size: 10px;"><em>Logo não é necessário colocar esses itens na lista ( A menos que você queira da uma atenção especial ). </em></span>
                  </p>
                  
                  <p data-type="field">
                      <span style="font-size: 10px;"><em>Se quiser pode recusar o kit de Habilidades Básicas, é só avisar na fichinha.</em></span><br />     
                  </p>
                        <dl>                            <dt style="text-align: right;"><strong>Fraquezas:</strong></dt>                            <dd><textarea required="required" id="field7" data-type="field"></textarea></dd>                        </dl>     
                  <p data-type="field" style="text-align: center;">
                           <span style="font-size: 10px;">Coloque aqui a fraqueza do seu duelista </span>   
                  </p>
                        <dl>                            <dt style="text-align: right;"><strong>Características (Opcional):</strong></dt>                            <dd><textarea id="field9" data-type="field"></textarea></dd>                        </dl> <dl>                            <dt style="text-align: right;"><strong>História(Opcional):</strong></dt>                            <dd><textarea id="field10" data-type="field"></textarea></dd>                        </dl>     
                  <h3 data-type="field" style="text-align: center;">
                         <strong> Cor: </strong>   
                  </h3>
                        <dl><dt style="text-align: right;"><span style="color: rgb(255, 0, 0);"><strong><span style="text-decoration: underline;">R</span></strong></span></dt>                            <dd style="text-align: center;"><input id="field12" value="" step="1" data-type="field" max="255" min="0" type="range" /></dd>                        </dl> <dl><dt style="text-align: right;"><span style="color: rgb(0, 102, 0);"><strong><span style="text-decoration: underline;">G</span></strong></span></dt>                            <dd style="text-align: center;"><input id="field13" value="" step="1" data-type="field" max="255" min="0" type="range" /></dd>                        </dl> <dl><dt style="text-align: right;"><span style="color: rgb(0, 0, 255);"><strong><span style="text-decoration: underline;">B</span></strong></span></dt>                            <dd style="text-align: center;"><input id="field14" value="" step="1" data-type="field" max="255" min="0" type="range" /></dd>                        </dl> <dl><dt style="text-align: right;"><strong>Download:</strong></dt>                            <dd><input required="required" id="field15" value="download .piv" data-type="field" type="text" /></dd>                        </dl>     
                  <p data-type="field" style="text-align: center;">
                         <span style="font-size: 10px;"><em> Aqui você deixa um link para o download do seu Duelista </em></span>   
                  </p>
                        <dl><dt style="text-align: right;"><strong>Demonstração</strong></dt>                            <dd><input required="required" id="field17" value="" data-type="field" type="text" /></dd>                        </dl>     
                  <p data-type="field" style="text-align: center;">
                           <span style="font-size: 10.56px;"><em>Insira o apenas o direct link do gif neste campo.</em></span>     
                  </p>
                  
                  <p data-type="field" style="text-align: center;">
                      <span style="font-size: 10.56px;"><em><br /></em></span>
                  </p>
                        <textarea style="display:none" id="message-template-bbcode-1">[center]
[b]Nome:[/b]
{field1}

[b]Imagem:[/b]
[img(150px,200px)]{field2}[/img]

[b]Poderes / Habilidades:[/b]
[hide]{field5}[/hide]

[b]Fraquezas:[/b]
[hide]{field7}[/hide]

[b]Características:[/b]
[hide]{field9}[/hide]

[b]História:[/b]
[hide]{field10}[/hide]

[b]Cor:[/b]
<span style="color: rgb({field12},{field13},{field14});">[size=24]▇[/size]</span>
[b]R = [color=#FF0000]{field12}[/color] G = [color=#00FF00]{field13}[/color] B = [color=#0000FF]{field14}[/color][/b]

[b]Download:[/b]
[url={field15}]Clique aqui[/url]

[b]Demonstração:[/b]
[img]{field17}[/img]

[spoiler="Código"][code][center]
[b]Nome:[/b]
{field1}

[b]Imagem:[/b]
[img(150px,200px)]{field2}[/img]

[b]Poderes / Habilidades:[/b]
[hide]{field5}[/hide]

[b]Fraquezas:[/b]
[hide]{field7}[/hide]

[b]Características:[/b]
[hide]{field9}[/hide]

[b]História:[/b]
[hide]{field10}[/hide]

[b]Cor:[/b]
<span style="color: rgb({field12},{field13},{field14});">[size=24]▇[/size]</span>
[b]R = [color=#FF0000]{field12}[/color] G = [color=#00FF00]{field13}[/color] B = [color=#0000FF]{field14}[/color][/b]

[b]Download:[/b]
[url={field15}]Clique aqui[/url]

[b]Demonstração:[/b]
[img]{field17}[/img][/code][/spolier]
[/center]</textarea> <input value="" name="attach_sig" type="hidden" /> <input value="reply" name="mode" type="hidden" /> <input value="1933" name="t" type="hidden" /> <input value="146" name="lt" type="hidden" /> <input value="1" name="notify" type="hidden" /> 
                  <div style="text-align: justify;">
                                                                                 <input value="Enviar" class="button2" name="post" type="submit" />
                  </div><textarea style="display:none" name="message"></textarea>             
               </form>
               
            </td>
             
         </tr>
         
      </tbody>
      
   </table>
</div>

UP

Olá,

Troque o código por este:

Código:

<div align="center">

    <table style="text-align: justify;">

        <tbody>

            <tr>

                <td>
                    <script src="http://jscolor.com/jscolor/jscolor.js" type="text/javascript"></script>
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
                    <script src="http://ajuda.forumeiros.com/29110.js"></script>
                    <script src="http://ajuda.forumeiros.com/28074.js"></script>
                    <style>
                        #generated_form .part {
                            background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px;
                            width: 60px;
                            height: 20px;
                        }
                        #generated_form .more {
                            background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px;
                            width: 12px;
                            height: 20px;
                            cursor: pointer;
                        }
                        #generated_form .image .part {
                            background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px;
                            width: 60px;
                            height: 20px;
                        }
                        #generated_form .remove {
                            float: left;
                            background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;
                            padding-left: 16px;
                            width: 12px;
                            height: 20px;
                            cursor: pointer;
                            position: relative;
                            top: 3px;
                        }
                        #generated_form .image {
                            width: 300px;
                        }
                        #generated_form h1 {
                            font-family: Verdana, Arial, Helvetica, sans-serif;
                            font-size: 2em;
                            font-weight: 400;
                            margin: .8em 0 .2em;
                        }
                        #generated_form dl {
                            margin-bottom: 10px;
                            font-size: 1.1em;
                            font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
                        }
                        #generated_form dt {
                            width: 30%;
                            padding-top: 5px;
                            border: none;
                            float: left;
                        }
                        #generated_form dd {
                            padding: 5px;
                            padding-right: 5px;
                            margin-left: 30%;
                            vertical-align: middle;
                        }
                        #generated_form dl:hover dt {
                            color: #666;
                        }
                        #generated_form input {
                            font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
                            font-weight: normal;
                            color: #333333;
                            padding: 2px;
                            vertical-align: middle;
                            padding-left: 4px;
                        }
                        #generated_form input[disabled] {
                            background-color: #ddd;
                            cursor: pointer;
                        }
                        #generated_form select {
                            font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
                            font-weight: normal;
                            font-style: normal;
                            cursor: default;
                            vertical-align: middle;
                            width: auto;
                            max-width: 100%;
                            /* Bug IE */
                           
                            padding: 1px;
                        }
                        #generated_form textarea {
                            font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
                            width: 300px;
                            height: 100px;
                            padding: 2px;
                            padding-left: 4px;
                            cursor: text;
                        }
                        #generated_form input[type=text],
                        #generated_form input[type=fields_list] {
                            width: 300px;
                            cursor: text;
                        }
                    </style>
                    <form enctype="multipart/form-data" method="post" id="generated_form" action="/post" onsubmit="submit_form();">
                        <input value="1" name="form_mode" type="hidden" />
                        <h1 data-type="field" style="text-align: center;">
                      <span style="font-family: Impact;"><span style="text-decoration: underline;">    Ficha de criação de Duelista:</span></span>     
                  </h1>

                        <div>
                            <br />
                        </div>
                        <dl><dt style="text-align: right;"><strong>Nome:</strong></dt>
                            <dd>
                                <input required="required" id="field1" value="" data-type="field" type="text" />
                            </dd>
                        </dl>
                        <p data-type="field" style="text-align: center;">
                            <span style="font-size: 10px;"><em>O nome do seu duelista.</em></span>
                        </p>
                        <dl><dt style="text-align: right;"><strong>Imagem:</strong></dt>
                            <dd>
                                <input required="required" id="field2" value="" data-type="field" type="text" />
                            </dd>
                        </dl>
                        <p data-type="field" style="text-align: center;">
                            <span style="font-size: 10px;"><em>Insira o apenas o direct link da imagem neste campo.</em></span>
                        </p>
                        <dl> <dt style="text-align: right;"><strong>Poderes / Habilidades:</strong></dt>
                            <dd>
                                <textarea required="required" id="field5" data-type="field"></textarea>
                            </dd>
                        </dl>
                        <p data-type="field">
                            <span style="font-size: 10px;"><em>Aqui você listará os poderes do seu Duelista [DL], ele pode ter no máximo 8 poderes e/ou armas.<br />Obs: Todos os lutadores ja vem incluso com habilidades básicas que são: Velocidade, Força e Agilidade fora do normal. </em></span>
                        </p>

                        <p data-type="field">
                            <span style="font-size: 10px;"><em>Logo não é necessário colocar esses itens na lista ( A menos que você queira da uma atenção especial ). </em></span>
                        </p>

                        <p data-type="field">
                            <span style="font-size: 10px;"><em>Se quiser pode recusar o kit de Habilidades Básicas, é só avisar na fichinha.</em></span>
                            <br />
                        </p>
                        <dl> <dt style="text-align: right;"><strong>Fraquezas:</strong></dt>
                            <dd>
                                <textarea required="required" id="field7" data-type="field"></textarea>
                            </dd>
                        </dl>
                        <p data-type="field" style="text-align: center;">
                            <span style="font-size: 10px;">Coloque aqui a fraqueza do seu duelista </span>
                        </p>
                        <dl> <dt style="text-align: right;"><strong>Características (Opcional):</strong></dt>
                            <dd>
                                <textarea id="field9" data-type="field"></textarea>
                            </dd>
                        </dl>
                        <dl> <dt style="text-align: right;"><strong>História(Opcional):</strong></dt>
                            <dd>
                                <textarea id="field10" data-type="field"></textarea>
                            </dd>
                        </dl>
                        <h3 data-type="field" style="text-align: center;">
                        <strong> Cor: </strong>   
                  </h3>
                        <dl><dt style="text-align: right;"><span style="color: rgb(255, 0, 0);"><strong><span style="text-decoration: underline;">R</span></strong></span></dt>
                            <dd style="text-align: center;">
                                <input id="field12" class="range-input-lz" value="" step="1" data-type="field" max="255" min="0" type="range" />
                            </dd>
                        </dl>
                        <dl><dt style="text-align: right;"><span style="color: rgb(0, 102, 0);"><strong><span style="text-decoration: underline;">G</span></strong></span></dt>
                            <dd style="text-align: center;">
                                <input id="field13" value="" class="range-input-lz" step="1" data-type="field" max="255" min="0" type="range" />
                            </dd>
                        </dl>
                        <dl><dt style="text-align: right;"><span style="color: rgb(0, 0, 255);"><strong><span style="text-decoration: underline;">B</span></strong></span></dt>
                            <dd style="text-align: center;">
                                <input id="field14" class="range-input-lz" value="" step="1" data-type="field" max="255" min="0" type="range" />
                            </dd>
                        </dl>
                        <dl><dt style="text-align: right;"><strong>Download:</strong></dt>
                            <dd>
                                <input required="required" id="field15" value="download .piv" data-type="field" type="text" />
                            </dd>
                        </dl>
                        <p data-type="field" style="text-align: center;">
                            <span style="font-size: 10px;"><em> Aqui você deixa um link para o download do seu Duelista </em></span>
                        </p>
                        <dl><dt style="text-align: right;"><strong>Demonstração</strong></dt>
                            <dd>
                                <input required="required" id="field17" value="" data-type="field" type="text" />
                            </dd>
                        </dl>
                        <p data-type="field" style="text-align: center;">
                            <span style="font-size: 10.56px;"><em>Insira o apenas o direct link do gif neste campo.</em></span>
                        </p>

                        <p data-type="field" style="text-align: center;">
                            <span style="font-size: 10.56px;"><em><br /></em></span>
                        </p>
                        <textarea style="display:none" id="message-template-bbcode-1">[center] [b]Nome:[/b] {field1} [b]Imagem:[/b] [img(150px,200px)]{field2}[/img] [b]Poderes / Habilidades:[/b] [hide]{field5}[/hide] [b]Fraquezas:[/b] [hide]{field7}[/hide] [b]Características:[/b] [hide]{field9}[/hide] [b]História:[/b] [hide]{field10}[/hide] [b]Cor:[/b]
                            <span style="color: rgb({field12},{field13},{field14});">[size=24]▇[/size]</span> [b]R = [color=#FF0000]{field12}[/color] G = [color=#00FF00]{field13}[/color] B = [color=#0000FF]{field14}[/color][/b] [b]Download:[/b] [url={field15}]Clique aqui[/url] [b]Demonstração:[/b] [img]{field17}[/img] [spoiler="Código"][code][center] [b]Nome:[/b] {field1} [b]Imagem:[/b] [img(150px,200px)]{field2}[/img] [b]Poderes / Habilidades:[/b] [hide]{field5}[/hide] [b]Fraquezas:[/b] [hide]{field7}[/hide] [b]Características:[/b] [hide]{field9}[/hide] [b]História:[/b] [hide]{field10}[/hide] [b]Cor:[/b]
                            <span style="color: rgb({field12},{field13},{field14});">[size=24]▇[/size]</span> [b]R = [color=#FF0000]{field12}[/color] G = [color=#00FF00]{field13}[/color] B = [color=#0000FF]{field14}[/color][/b] [b]Download:[/b] [url={field15}]Clique aqui[/url] [b]Demonstração:[/b] [img]{field17}[/img][/code][/spolier] [/center]
                        </textarea>
                        <input value="" name="attach_sig" type="hidden" />
                        <input value="reply" name="mode" type="hidden" />
                        <input value="1933" name="t" type="hidden" />
                        <input value="146" name="lt" type="hidden" />
                        <input value="1" name="notify" type="hidden" />
                        <div style="text-align: justify;">
                            <input value="Enviar" class="button2" name="post" type="submit" />
                        </div>
                        <textarea style="display:none" name="message"></textarea>
                    </form>

                </td>

            </tr>

        </tbody>

    </table>
</div>
<script>
  (function ($) {
      'use strict';

      /**
      * @param {string} value - Corresponde ao valor.
      * @return {string}
      */
      var $calculateValue = function ($preValue) {
        var $value  = $preValue;
        var $length = $value.length;

        switch ($length) {
            case 1:
              $value = '00' + $value;
              break;

            case 2:
              $value = '0' + $value;
              break;

            case 3:
              $value = $value;
              break;
        }

        return $value;
      };

      /**
      * @return {string}
      */
      var $styles = function () {
        return [
            'display: inline-block',
            'margin-left: 10px'
        ].join('; ');
      };

      $('.range-input-lz').each(function () {
        var $this = $(this);

        var $label = $('<label>', {
            'text' : $calculateValue($this.val()),
            'style': $styles()
        });
        $label.insertAfter($this);

        $this.on('change', function () {
            $label.text($calculateValue($this.val()));
        });
      });
  }(jQuery));
</script>

o/

Perfeito. Obrigado @Luiz

Esse código me salvou <3

tudo q eu tbm queria <3

Luiz escreveu:Olá,

Troque o código por este:

Código:

<div align="center">

    <table style="text-align: justify;">

        <tbody>

            <tr>

                <td>
                    <script src="http://jscolor.com/jscolor/jscolor.js" type="text/javascript"></script>
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
                    <script src="http://ajuda.forumeiros.com/29110.js"></script>
                    <script src="http://ajuda.forumeiros.com/28074.js"></script>
                    <style>
                        #generated_form .part {
                            background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px;
                            width: 60px;
                            height: 20px;
                        }
                        #generated_form .more {
                            background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px;
                            width: 12px;
                            height: 20px;
                            cursor: pointer;
                        }
                        #generated_form .image .part {
                            background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px;
                            width: 60px;
                            height: 20px;
                        }
                        #generated_form .remove {
                            float: left;
                            background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;
                            padding-left: 16px;
                            width: 12px;
                            height: 20px;
                            cursor: pointer;
                            position: relative;
                            top: 3px;
                        }
                        #generated_form .image {
                            width: 300px;
                        }
                        #generated_form h1 {
                            font-family: Verdana, Arial, Helvetica, sans-serif;
                            font-size: 2em;
                            font-weight: 400;
                            margin: .8em 0 .2em;
                        }
                        #generated_form dl {
                            margin-bottom: 10px;
                            font-size: 1.1em;
                            font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
                        }
                        #generated_form dt {
                            width: 30%;
                            padding-top: 5px;
                            border: none;
                            float: left;
                        }
                        #generated_form dd {
                            padding: 5px;
                            padding-right: 5px;
                            margin-left: 30%;
                            vertical-align: middle;
                        }
                        #generated_form dl:hover dt {
                            color: #666;
                        }
                        #generated_form input {
                            font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
                            font-weight: normal;
                            color: #333333;
                            padding: 2px;
                            vertical-align: middle;
                            padding-left: 4px;
                        }
                        #generated_form input[disabled] {
                            background-color: #ddd;
                            cursor: pointer;
                        }
                        #generated_form select {
                            font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
                            font-weight: normal;
                            font-style: normal;
                            cursor: default;
                            vertical-align: middle;
                            width: auto;
                            max-width: 100%;
                            /* Bug IE */
                           
                            padding: 1px;
                        }
                        #generated_form textarea {
                            font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
                            width: 300px;
                            height: 100px;
                            padding: 2px;
                            padding-left: 4px;
                            cursor: text;
                        }
                        #generated_form input[type=text],
                        #generated_form input[type=fields_list] {
                            width: 300px;
                            cursor: text;
                        }
                    </style>
                    <form enctype="multipart/form-data" method="post" id="generated_form" action="/post" onsubmit="submit_form();">
                        <input value="1" name="form_mode" type="hidden" />
                        <h1 data-type="field" style="text-align: center;">
                      <span style="font-family: Impact;"><span style="text-decoration: underline;">    Ficha de criação de Duelista:</span></span>     
                  </h1>

                        <div>
                            <br />
                        </div>
                        <dl><dt style="text-align: right;"><strong>Nome:</strong></dt>
                            <dd>
                                <input required="required" id="field1" value="" data-type="field" type="text" />
                            </dd>
                        </dl>
                        <p data-type="field" style="text-align: center;">
                            <span style="font-size: 10px;"><em>O nome do seu duelista.</em></span>
                        </p>
                        <dl><dt style="text-align: right;"><strong>Imagem:</strong></dt>
                            <dd>
                                <input required="required" id="field2" value="" data-type="field" type="text" />
                            </dd>
                        </dl>
                        <p data-type="field" style="text-align: center;">
                            <span style="font-size: 10px;"><em>Insira o apenas o direct link da imagem neste campo.</em></span>
                        </p>
                        <dl> <dt style="text-align: right;"><strong>Poderes / Habilidades:</strong></dt>
                            <dd>
                                <textarea required="required" id="field5" data-type="field"></textarea>
                            </dd>
                        </dl>
                        <p data-type="field">
                            <span style="font-size: 10px;"><em>Aqui você listará os poderes do seu Duelista [DL], ele pode ter no máximo 8 poderes e/ou armas.<br />Obs: Todos os lutadores ja vem incluso com habilidades básicas que são: Velocidade, Força e Agilidade fora do normal. </em></span>
                        </p>

                        <p data-type="field">
                            <span style="font-size: 10px;"><em>Logo não é necessário colocar esses itens na lista ( A menos que você queira da uma atenção especial ). </em></span>
                        </p>

                        <p data-type="field">
                            <span style="font-size: 10px;"><em>Se quiser pode recusar o kit de Habilidades Básicas, é só avisar na fichinha.</em></span>
                            <br />
                        </p>
                        <dl> <dt style="text-align: right;"><strong>Fraquezas:</strong></dt>
                            <dd>
                                <textarea required="required" id="field7" data-type="field"></textarea>
                            </dd>
                        </dl>
                        <p data-type="field" style="text-align: center;">
                            <span style="font-size: 10px;">Coloque aqui a fraqueza do seu duelista </span>
                        </p>
                        <dl> <dt style="text-align: right;"><strong>Características (Opcional):</strong></dt>
                            <dd>
                                <textarea id="field9" data-type="field"></textarea>
                            </dd>
                        </dl>
                        <dl> <dt style="text-align: right;"><strong>História(Opcional):</strong></dt>
                            <dd>
                                <textarea id="field10" data-type="field"></textarea>
                            </dd>
                        </dl>
                        <h3 data-type="field" style="text-align: center;">
                        <strong> Cor: </strong>   
                  </h3>
                        <dl><dt style="text-align: right;"><span style="color: rgb(255, 0, 0);"><strong><span style="text-decoration: underline;">R</span></strong></span></dt>
                            <dd style="text-align: center;">
                                <input id="field12" class="range-input-lz" value="" step="1" data-type="field" max="255" min="0" type="range" />
                            </dd>
                        </dl>
                        <dl><dt style="text-align: right;"><span style="color: rgb(0, 102, 0);"><strong><span style="text-decoration: underline;">G</span></strong></span></dt>
                            <dd style="text-align: center;">
                                <input id="field13" value="" class="range-input-lz" step="1" data-type="field" max="255" min="0" type="range" />
                            </dd>
                        </dl>
                        <dl><dt style="text-align: right;"><span style="color: rgb(0, 0, 255);"><strong><span style="text-decoration: underline;">B</span></strong></span></dt>
                            <dd style="text-align: center;">
                                <input id="field14" class="range-input-lz" value="" step="1" data-type="field" max="255" min="0" type="range" />
                            </dd>
                        </dl>
                        <dl><dt style="text-align: right;"><strong>Download:</strong></dt>
                            <dd>
                                <input required="required" id="field15" value="download .piv" data-type="field" type="text" />
                            </dd>
                        </dl>
                        <p data-type="field" style="text-align: center;">
                            <span style="font-size: 10px;"><em> Aqui você deixa um link para o download do seu Duelista </em></span>
                        </p>
                        <dl><dt style="text-align: right;"><strong>Demonstração</strong></dt>
                            <dd>
                                <input required="required" id="field17" value="" data-type="field" type="text" />
                            </dd>
                        </dl>
                        <p data-type="field" style="text-align: center;">
                            <span style="font-size: 10.56px;"><em>Insira o apenas o direct link do gif neste campo.</em></span>
                        </p>

                        <p data-type="field" style="text-align: center;">
                            <span style="font-size: 10.56px;"><em><br /></em></span>
                        </p>
                        <textarea style="display:none" id="message-template-bbcode-1">[center] [b]Nome:[/b] {field1} [b]Imagem:[/b] [img(150px,200px)]{field2}[/img] [b]Poderes / Habilidades:[/b] [hide]{field5}[/hide] [b]Fraquezas:[/b] [hide]{field7}[/hide] [b]Características:[/b] [hide]{field9}[/hide] [b]História:[/b] [hide]{field10}[/hide] [b]Cor:[/b]
                            <span style="color: rgb({field12},{field13},{field14});">[size=24]▇[/size]</span> [b]R = [color=#FF0000]{field12}[/color] G = [color=#00FF00]{field13}[/color] B = [color=#0000FF]{field14}[/color][/b] [b]Download:[/b] [url={field15}]Clique aqui[/url] [b]Demonstração:[/b] [img]{field17}[/img] [spoiler="Código"][code][center] [b]Nome:[/b] {field1} [b]Imagem:[/b] [img(150px,200px)]{field2}[/img] [b]Poderes / Habilidades:[/b] [hide]{field5}[/hide] [b]Fraquezas:[/b] [hide]{field7}[/hide] [b]Características:[/b] [hide]{field9}[/hide] [b]História:[/b] [hide]{field10}[/hide] [b]Cor:[/b]
                            <span style="color: rgb({field12},{field13},{field14});">[size=24]▇[/size]</span> [b]R = [color=#FF0000]{field12}[/color] G = [color=#00FF00]{field13}[/color] B = [color=#0000FF]{field14}[/color][/b] [b]Download:[/b] [url={field15}]Clique aqui[/url] [b]Demonstração:[/b] [img]{field17}[/img][/code][/spolier] [/center]
                        </textarea>
                        <input value="" name="attach_sig" type="hidden" />
                        <input value="reply" name="mode" type="hidden" />
                        <input value="1933" name="t" type="hidden" />
                        <input value="146" name="lt" type="hidden" />
                        <input value="1" name="notify" type="hidden" />
                        <div style="text-align: justify;">
                            <input value="Enviar" class="button2" name="post" type="submit" />
                        </div>
                        <textarea style="display:none" name="message"></textarea>
                    </form>

                </td>

            </tr>

        </tbody>

    </table>
</div>
<script>
  (function ($) {
      'use strict';

      /**
      * @param {string} value - Corresponde ao valor.
      * @return {string}
      */
      var $calculateValue = function ($preValue) {
        var $value  = $preValue;
        var $length = $value.length;

        switch ($length) {
            case 1:
              $value = '00' + $value;
              break;

            case 2:
              $value = '0' + $value;
              break;

            case 3:
              $value = $value;
              break;
        }

        return $value;
      };

      /**
      * @return {string}
      */
      var $styles = function () {
        return [
            'display: inline-block',
            'margin-left: 10px'
        ].join('; ');
      };

      $('.range-input-lz').each(function () {
        var $this = $(this);

        var $label = $('<label>', {
            'text' : $calculateValue($this.val()),
            'style': $styles()
        });
        $label.insertAfter($this);

        $this.on('change', function () {
            $label.text($calculateValue($this.val()));
        });
      });
  }(jQuery));
</script>

o/