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!



1º - Adiquirir conhecimentos básicos de Javascript

1 - seja de maneira explícita. Diz-se em Javascript que isto é uma variável.
O comando que permite declarar uma variável é a palavra var. Por exemplo:

var Numero = 1
var Nome = "Quakeline"

2 - seja de maneira implícita. Escreva-se directamente o nome da variável seguido do valor de atribuição. Por exemplo:

Numero = 1
Nome = "Quakeline"


Exercício

Vamos utilizar o método write() para visualizar as variáveis. Defina-se uma variável chamada "texto" que contém uma cadeia de caracteres "Meu número preferido é o " e uma outra chamada "variavel" inicializada em 7.









Os nomes reservados

as palavras da lista abaixo só podem ser utilizadas para nomes de funções ou de variáveis.
Algumas desta palavras são palavras chaves Javascript, outras foram reservadas pela Netscape para um eventual uso futuro.

A abstract
B boolean break byte
C case catch char class const continue
D default do double
E else extends
F false final finally float for function
G goto
I if implements import in instanceof int interface
L long
N native new null
P package private protected public
R return
S short static super switch synchronized
T this throw throws transient true try
V var void
W while with

As variáveis são úteis mas é necessário saber as manipula-las, Vejamos os diferentes operadores que estão a nossa disposição no Javascript.


Nos exemplos, O valor inicial da variável x será sempre igual 11

Importante. Confunda-se muitas vezes o = e o == (dois símbolos =). O = é um operador de atribuição de valor enquanto que o == é um operador de comparação. Este confusão éuma grande fonte de erros de programação.

operadores de associação

Chama-se assim aos operadores que realizem um cálculo no qual uma variável intervém nos dois lados do símbolo = (são de alguma maneira operadores de atribuição).

No exemplo que segue o x tem sempre o valor 11 e y terá como valor 5

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: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

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:

:seta: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:

Código:

<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.


:seta: 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:

Código:

<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.


:seta: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:

Código:

<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.

:seta: 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:

Código:

<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:
Texto de exemplo
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:

Código:

[quote]<select name="f"> <option value="7">Problemas de conexão</option> <option value="8">Questões sobre códigos</option> <option value="9">Questões sobre a aparência do fórum</option> <option value="10">Questões sobre o Painel de controle</option> </select>[/quote]

:seta: 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:

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:

Código:

<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:

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

Campos que foram estudados no ponto 3 devem estar aqui

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() {
jQuery('acolor=#ff0a0a]f=X&mode=newtopic"]').attr('href', '/hY-');
});

- No lugar de X, coloque o número do fórum em que deseja que o formulário funcione.
- No lugar de Y, coloque o ID da página criada anteriormente.

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!

Código:

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

Exemplo:

Código:

<script src="http://toon.forumeiros.com/h2-testes"></script>

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Formulário de Postagens