Detalhes da questão

Endereço do fórum: drmpolicia.forumeiros.com
Versão do fórum: PhpBB3

Descrição

Olá, gostaria de saber como posso criar um formulário com esse tipo de propriedade:
https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

Obrigado desde já.

Olá,

O senhor já possui um formulário criado onde gostaria de aplicar esse código ou irá criar um do zero?

Posso criar um do zero. O problema é que tenho que criar vários formulários, e gostaria de saber um meio de criar vários, e depois só colocar ou editar algo semelhante simples no fórum.

Up

Anteriormente era necessário desenvolver cada formulário manualmente, porém com esse gerador é possível produzir um trabalho de qualidade sem ter que escrever uma linha de código.

No formulário Forumeiros você tem a opção de criar listas, listas de escolhas entre outras opções, com a mesma funcionalidade.
 Gerador de Formulário

Também deixo abaixo 3 tutoriais para estudos.
[TUTORIAL] Criar um formulário de postagens
[TUTORIAL] Criar formulários de postagem
[TUTORIAL] Formulário de Postagens

Eu já li estes textos, mas como integro aquele sistema indicado pelo link na primeira mensagem deste mesmo tópic?

Nós podemos explicar se tiver o formulário, mas, em outras palavras, a explicação de como fazê-lo já está aqui: https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

Já existe até as funções, mas, só precisas postar o formulário aqui.

Kyo Panda escreveu:Olá,

O senhor já possui um formulário criado onde gostaria de aplicar esse código ou irá criar um do zero?

Mas eu gostaria de criar um do zero. ;-;

Saudações!

E o que impede o senhor de criar do zero então?
O que podemos fazer é lhe ajudar a criar, dando as ferramentas certas para isso, como já foi mandado nas mensagens acima.

No mais, existem diversos tutoriais no próprio Google sobre a formulação de formulários em HTML.
Até mais.
Sennior

Aqui está o código do formulário no qual desejo aplicar o efeito indicado na primeira mensagem deste tópico:

Código:

            <script type="text/javascript" src="http://jscolor.com/jscolor/jscolor.js"></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 onsubmit="submit_form();" action="/post" id="generated_form" method="post" enctype="multipart/form-data">

 <input type="hidden" name="form_mode" value="1">

<dl><dt>Nick dos alunos</dt>
                            <dd><input type="text" data-type="field" value="Valor padrão" id="field0"></dd>
                        </dl>

<dl><dt>Nick do instrutor</dt>
                            <dd><input type="text" data-type="field" value="Valor padrão" id="field2"></dd>
                        </dl>

<dl title="Este tipo de campo permite criar uma lista, muito bom para lista de imagens, por exemplo.">
                            <dt>Qualidade da aula</dt>
                            <dd><div class="fields-list" data-min="1" data-max="10" data-separador=", " id="field3"><input type="fields_list"></div></dd>
                        </dl>

<dl>
                            <dt>Observações</dt>
                            <dd><textarea data-type="field" id="field4"></textarea></dd>
                        </dl>

<dl><dt>Atenciosamente</dt>
                            <dd><input type="text" data-type="field" value="Valor padrão" id="field5"></dd>
                        </dl>


         <textarea id="message-template-bbcode-1" style="display:none">[b]Nick dos alunos:[/b]
{field0}.

[b]Nick do Instrutor:[/b]
{field2}.

[b]Qualidade da aula:[/b]
{field3}.

[b]Observações:[/b]
{field4}.


[b]Atenciosamente, [i]{field5}[/i][/b]

</textarea>
            <input type="hidden" name="attach_sig" value="">
            <input type="hidden" name="mode" value="reply">
            <input type="hidden" name="t" value="2">
            <input type="hidden" name="lt" value="146">
            <input type="hidden" name="notify" value="1">
            <input type="submit" name="post" class="button2" value="Enviar">
         
                <textarea name="message" style="display:none"></textarea>
           

</form>

Up

Up

Em quais campos deseja aplicar o script?

Nick dos alunos e
Nick do instrutor

Aqui está:

Código:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bootstrap-tagsinput/bootstrap-tagsinput/master/dist/bootstrap-tagsinput.min.js"></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>
    @import url(https://cdn.rawgit.com/bootstrap-tagsinput/bootstrap-tagsinput/master/dist/bootstrap-tagsinput.css);

    #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;
    }

    span.tag.label.label-info {
        background-color: #2e80c8;
        padding: 2px 5px;
        border-radius: 3px;
    }
</style>

<form onsubmit="submit_form();" action="/post" id="generated_form" method="post" enctype="multipart/form-data">

    <input type="hidden" name="form_mode" value="1">

    <dl>
        <dt>Nick dos alunos</dt>
        <dd><input type="text" data-type="field" data-role="tagsinput" value="Valor padrão" id="field0"></dd>
    </dl>

    <dl>
        <dt>Nick do instrutor</dt>
        <dd><input type="text" data-type="field" data-role="tagsinput" value="Valor padrão" id="field2"></dd>
    </dl>

    <dl title="Este tipo de campo permite criar uma lista, muito bom para lista de imagens, por exemplo.">
        <dt>Qualidade da aula</dt>
        <dd>
            <div class="fields-list" data-min="1" data-max="10" data-separador=", " id="field3"><input type="fields_list"></div>
        </dd>
    </dl>

    <dl>
        <dt>Observações</dt>
        <dd><textarea data-type="field" id="field4"></textarea></dd>
    </dl>

    <dl>
        <dt>Atenciosamente</dt>
        <dd><input type="text" data-type="field" value="Valor padrão" id="field5"></dd>
    </dl>

    <textarea id="message-template-bbcode-1" style="display:none">[b]Nick dos alunos:[/b]
{field0}.
 
[b]Nick do Instrutor:[/b]
{field2}.
 
[b]Qualidade da aula:[/b]
{field3}.
 
[b]Observações:[/b]
{field4}.
 
 
[b]Atenciosamente, [i]{field5}[/i][/b]
    </textarea>

    <input type="hidden" name="attach_sig" value="">
    <input type="hidden" name="mode" value="reply">
    <input type="hidden" name="t" value="2">
    <input type="hidden" name="lt" value="146">
    <input type="hidden" name="notify" value="1">
    <input type="submit" name="post" class="button2" value="Enviar">
    <textarea name="message" style="display:none"></textarea>
</form>

Acredito que precisará ajustar a aparência dos campos de texto com as tags, mas sei que o senhor manja dos CSSs. ◕‿↼

Muito obrigado, Kyo.
Resolvido.

#Edit: Não tá dando pra marcar resolvido.