[TUTORIAL] Criar um formulário de postagens

Em algumas seções do fórum é necessário que as mensagens sigam um mesmo padrão. Para que seja mais fácil para os usuários usamos formulários que geram a mensagem ao final e que ele somente tem de preencher o que realmente é necessário. Verá neste tutorial como criar e colocar para funcionar um formulário. Atenção, é sempre bom ter conhecimentos de HTML e Javascript para fazer formulários!

--> Tutoriais e astúcias <--
Criar um formulário de postagens

1º - Adiquirir conhecimentos básicos de Javascript
Antes de mais nada é preciso que você tenha, pelo menos, uma vaga noção dessa linguagem de programação, para que consiga lidar com o formulário e fazer as alterações que bem quiser nele. O HTML também é interessante, mas menos necessário, porém se estiver com vontade de fazer algo bom, terá de aprender também. Na Internet é muito fácil de encontrar tutoriais explicativos sobre ambas as linguagens.

Se tiver um editor de códigos HTML será melhor ainda, pois eles irão guiá-lo na hora de fazer a parte visual como também na hora de criar os campos. Se estiver interessado em um, veja esta lista: Editores HTML.



2º - Criar uma página HTML para suportar o formulário:
Para o nosso formulário será preciso criar uma página HTML personalizada. Lembre-se de que é preciso que ela tenha o topo e o fim do fórum, para que seja possível usar os recursos do jQuery, necessários no formulário. Dê à página o título que desejar, ele não terá efeitos neste momento. Para aprender a criar uma página HTML basta ler o seguinte tutorial: Criar uma página HTML personalizada



3º - Noção da função e tipo dos campos que podem ser adicionados:
Agora temos que compreender como funcionam os campos, seus atributos e os tipos que serão necessários no formulário. Geralmente eles se resumem em alguns principais:

Campo de texto simples
Este é o mais clássico, o campo de escrita normal para poucos caracteres, como para o título do tópico ou para a descrição. Ele é composto da seguinte forma:

<input type="text" name="sform_nome" value="valor padrão" />

Exisem alguns outros atributos, como maxlength (número máximo de caracteres), class (classe CSS), porém estes você deverá conhecer mais profundamente em um tutorial específico para códigos HTML.
Vermelho: especifique um nome para o campo, deverá ser um simples, sem acentos ou espaços, para o identificar. Irá utilizá-lo mais para frente para compor os conteúdos. Verá também que esta propriedade pode ser modificada, para que o campo assuma o lugar de campos especiais, como o título do tópico, por exemplo.
Verde: o valor que deseja que o campo tenha assim que a página for carregada, se não quiser nada basta remover o que está em verde.


Caixa de texto
Caixa para a escrita de mensagens mais longas, como por exemplo a caixa de escrita dos tópicos. A caixa de texto é formada da seguinte forma:

<textarea name="sform_nome" rows="7" cols="7">Valor padrão</textarea>

Vermelho: especifique um nome para o campo, deverá ser um simples, sem acentos ou espaços, para o identificar. Irá utilizá-lo mais para frente para compor os conteúdos. Verá também que esta propriedade pode ser modificada, para que o campo assuma o lugar de campos especiais, como o título do tópico, por exemplo.
Verde: o valor que deseja que o campo tenha assim que a página for carregada, se não quiser nada basta remover o que está em verde.
Laranja: estes valores determinam o tamanho do campo de texto. Basta ir alterando conforme desejar para que ele fique do tamanho adequado.


Botões (enviar ou funções)
Com este tipo poderá submeter o formulário ou então aplicar uma função criada previamente com Javascript. Ele é composto da seguinte forma:

<input type="tipo" name="sform_nome" value="valor padrão" />

Exisem alguns outros atributos, como maxlength (número máximo de caracteres), class (classe CSS), porém estes você deverá conhecer mais profundamente em um tutorial específico para códigos HTML.
Vermelho: especifique um nome para o campo, deverá ser um simples, sem acentos ou espaços, para o identificar. Irá utilizá-lo mais para frente para compor os conteúdos. Verá também que esta propriedade pode ser modificada, para que o campo assuma o lugar de campos especiais, como o título do tópico, por exemplo.
Verde: o valor que será exibido dentro dele.
Violeta: Poderá escolher entre submit para que a ação do botão seja enviar o formulário ou então button, para que ele faça uma ação diferente, que já foi definida.

Caixa de seleção
A caixa de seleção é aquela em que você deve escolher um dos valores pré-determinados, como por exemplo Sim ou Não. Ela funciona da seguinte forma:

<select name="sform_nome">Opções</select>

Vermelho: especifique um nome para o campo, deverá ser um simples, sem acentos ou espaços, para o identificar. Irá utilizá-lo mais para frente para compor os conteúdos. Verá também que esta propriedade pode ser modificada, para que o campo assuma o lugar de campos especiais, como o título do tópico, por exemplo.
Laranja: para cada uma das opções que você colocar deverá adicionar a seguinte linha dentro da baliza select:

<option value="valor">Texto de exemplo</option>

Em preto deverá colocar o valor que será definido para o campo quando clicar na opção X, e no Texto de exemplo o texto que será exibido para o usuário. Por exemplo, ficaria assim um código desenvolvido:

Exemplo:

Campos ocultos
Pode parecer algo inútil, porém não é. Estes campos serão usados quando queremos que vários campos formem um único, por exemplo, vários campos componham o que, na postagem comum será a mensagem enviada ou o título do tópico. Ele se estrutura da seguinte maneira:

<input type="hidden" name="sform_nome" value="valor padrão" />

Exisem alguns outros atributos, como maxlength (número máximo de caracteres), class (classe CSS), porém estes você deverá conhecer mais profundamente em um tutorial específico para códigos HTML.
Vermelho: especifique um nome para o campo, deverá ser um simples, sem acentos ou espaços, para o identificar. Irá utilizá-lo mais para frente para compor os conteúdos. Verá também que esta propriedade pode ser modificada, para que o campo assuma o lugar de campos especiais, como o título do tópico, por exemplo.
Verde: o valor que deseja que o campo tenha assim que a página for carregada, se não quiser nada basta remover o que está em verde.



4º - Compreendendo os campos especiais:
Quando queremos formar um formulário, os resultados dos campos que criamos acima terão que ser enviados para o sistema de postagem do fórum de uma forma que ele possa entender como os dados são processados. Para isso usamos campos ocultos com nomes que são reconhecidos pelo sistema como título do tópico, ou mensagem ou ainda como descrição. Vejamos os tipos e os valores do atributo name para cada um deles:

Campos especiais
Parte do tópico	Valor do atributo name
Título do tópico	subject
Descrição do tópico	description
Fórum em que será postado	f
Botão que envia a mensagem (terá que ter obrigatoriamente este valor)	post
Toda a mensagem	message

Exemplo de um campo oculto com o título da mensagem predefinido:

<input type="hidden" value="Título do tópico" name="subject"

5º - Estruturar o formulário:
Na página que criamos deverá colocar o seguinte código:

<script>
formulario = {
valor: function(input, attribute) {
if(!attribute) {
return jQuery('*[name=sform_' + input + ']').val();
}
else {
return jQuery('*[name=sform_' + input + ']').attr(attribute);
}
},
definir: function(input, value) {
jQuery('*[name=' + input + ']').val(value);
}
}

jQuery(document).ready(function() {
//Valores que precisam ser definidos (estudaremos no próximo ponto)
});
</script>
<form action="/posting.forum" method="post" enctype="multipart/form-data">
Campos que foram estudados no ponto 3 devem estar aqui
<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="lt" value="0" />
<input value="Submeter formulário" type="submit" class="button1" name="post" />
</form>

Na linha em verde deverá criar os campos que foram estudados no ponto 3, de acordo com o que você deseja fazer. Basta criar, ainda não se preocupe com a forma como eles serão interpretados, isso trataremos no próximo ponto, que será o que deveremos substituir no que está em vermelho.

Pode parecer que fizemos pouco, mas o formulário está quase pronto na sua parte funcional, somente não trataremos neste tutorial a parte estética, que deverá ser feita por você, caso tenha um entendimento sobre as balizas HTML que são necessárias para criar efeitos CSS.



6º - Interpretando os campos:
Você no ponto anterior deve ter criado campos para os valores predefinidos, como a ID do fórum onde o tópico será postado, o título... a não se que eles sejam dinâmicos, ou sejam dependendendo de como outros valores se comportarem ele se comportará de uma forma, que é o que trabalharemos neste ponto.

Temos vários campos, por exemplo texto1, texto2, texto3 e outros, que foram criados tento como base o ponto 3, onde substituía-se o valor em vermelho pelo nome que gostaria de dar ao campo. Para por exemplo gerarmos a mensagem que está em um campo oculto e que é gerada tendo como base 3 outros campos teríamos de colocar na parte vermelha referida no ponto anterior o seguinte código:

formulario.definir('message', formulario.valor('texto1') + formulario.valor('texto2');

Isso faz com que o campo especial message seja o valor 1 mais o valor 2, dois campos que o usuário teve que preencher acima. Pode fazer isso como quiser, somente tenha em mente que para qubrar linhas em Javacript deverá usar \n, veja um segundo exemplo de como ficaria para um formulário de pedidos gráficos:

formulario.definir('message', 'Dimensões do pedido: ' + formulario.valor('dimensoes') + '\n Tipo ' + formulario.valor('tipo');

Viu que temos duas funções para usarmos, a formulario.definir que define um valor para um campo especial e que deve ser usada da seguinte forma: formulario.definir('NOME DO CAMPO', 'VALOR QUE ELE DEVERÁ TER'); e também a função valor: formulario.valor('NOME DO CAMPO'); esta retornará o valor do campo que deverá ser o que substituiu pelo que estava em vermelho no ponto 3. Depois de tudo pronto salve a página, iremos partir para a aplicação do botão na hora de criar um tópico.



7º - Ativar o formulário nos fóruns desejados:
Agora deverá criar uma nova página HTML com o seguinte código:

jQuery(document).ready(function() {
if(window.location.href.match(/-f/((?|#).+)?/)) {
jQuery('a[href^="/post?f=3&mode=newtopic"]').attr('href', 'endereço da primeira página HTML com o formulário');
}
});

Deverá alterar o valor em vermelho para o fórum em que deverá aparecer o botão com esta nova função, o valor numérico pode ser obtido acessando o fórum em questão, verá que no final do endereço existe: -f4 por exemplo, neste caso deverá pegar o 4 e substituir!

No endereço da página deverá colocar o endereço da nova página que criamos para o formulário HTML, que deve estar salva. Feito isso agora temos que fazê-la funcionar em todo o fórum, para que quando o fórum ou o tópico pertecer ao fórum indicado o botão Novo terá a nova função. Para isso devemos copiar o endereço dessa nova página HTML que acabamos de criar que contém o código dos fóruns, provavelmente, se não criou outras páginas, ela será a -h2! Depois somente é necessário aceder a:
Painel de controle -> Geral -> Fórum -> Configuração

No campo descrição do site deverá adicionar antes de tudo o seguinte código, substituindo o que está em vermelho pelo link da página que criamos, que deve ser a -h2!

<script src="Endereço da página"></script>

Exemplo:

<script src="https://ajuda.forumeiros.com/h2-testes"></script>

table][tr][td] [/td][td]Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Criar um formulário de postagens [/td][/tr][/table]

---

© Fórum dos Fóruns