A tag <label> serve para criar um relacionamento entre o texto (rótulo descritivo) e o campo. Essa tag é muito usada para tornar o site acessivel a leitores de tela(para deficientes visuais).

Mas ela também faz com que ao ser clicado no texto o campo receba o foco(o cursor), com isso podemos tornar o texto de um checkbox clicavel.

Para usa-lo é só adicionar um for=”nomedocampo” dentro do label o nomedocampo deve ser definido no id do input(essa é a primeira funcionalidade que eu vejo para esse id =D), lembrando que o id deve ser unico em todo o formulario.

Aqui um codigo de exemplo:

  <form method="post" action="?">
<label for="username">Nome:</label> <input type='text' id='username' />

<label for="password">Senha: </label> <input type='password' id='password' />

<label for="chekbox">Chekbox: </label><input type="checkbox" value="login" id='chekbox' />
<input type="submit" value="login" />
</form>

Exemplo, clique nos textos:

Legal né ?, e pode ser usado em qualquer formulário, e com certeza os usuarios iram agradecer já que fica bem mais facil de se clicar, só é preciso que os usuarios saibam dessa funcionalidade

Para quem oferece algum sistema, onde qualquer pessoa possa enviar textos é interessante, ter um editor para formatação de textos, já que não é qualquer um que sabe comandos HTML para formatar o texto. E o seu uso é recomendado para não permitir que qualquer comando HTML possa ser usado, já que alguns comandos poderiam arruinar o seu Layout

Para fazer isso existem dois tipo de editores:

WYSIWYG(What You See Is What You Get), que é um editor visual ou seja ao usa-lo você já verá o texto formatado, igual o word, g-mail, wordpress, etc.

BBCODE(Bulletin Board Code), que é uma simples função para substituir caracteres, ex: a tag <b></b> ficará [b][/b], como o seu nome diz ele foi criado para fóruns, onde é encontrado comumente, para criar um editor desse é preciso saber bastante programação, já que é preciso, substituir todos os caracteres, e bloquear o uso de outros comandos html.

Usando um WYSIWYG

Os editores desse tipo, são de uso mais facil, pois são feitos com Javascript, e podem ser usados com qualquer tipo de sistema, PHP, ASP, etc.

Quando eu estive procurando por isso, achei um monte de editores assim, mas não consegui usar ou adaptar ao que eu queria quase nenhum.

O unico que eu me dei bem foi o TinyMCE. Veja aqui um exemplo dele Para usa-lo é bem simple, com o download dele em alguma pasta do seu sistema, e adicione o seguinte no arquivoirá usa-lo

<script type=”text/javascript” src=”pasta_onde_esta_os_arquivos/tinymce/tiny_mce.js”></script>

<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "safari,spellchecker,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,pagebreak,imagemanager,filemanager",
theme_advanced_buttons1_add_before : "save,newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,media,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,spellchecker,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
content_css : "/example_data/example_full.css",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
external_link_list_url : "example_data/example_link_list.js",
external_image_list_url : "example_data/example_image_list.js",
flash_external_list_url : "example_data/example_flash_list.js",
template_external_list_url : "example_data/example_template_list.js",
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true,
apply_source_formatting : true,
spellchecker_languages : "+English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv"
});
</script>

Esse segundo javascript serve para formatar a exibição, no caso aqui ele irá aparecer todas as opções, mas como ele usa um esquema de plugins, cada botão é um plugin, então é possiveo formatar isso.

Como pode ser visto ele tem theme_advanced_buttonsX_add e na frente de cada uma tem os botões que seram mostrados, ou seja é só deletar o nome do botão para remove-lo. E se não for usar um botão pode remover a sua pasta dentro do tinymce para ficar mais leve.

Adicionando esses scripts ele irá adicionar o editor em todas as textareas que houver na página.

Para qualquer um que queira aprender alguma programação voltada para WEB(PHP, ASP, JAVA, etc) precisa saber como criar um formulário em HTML, já que é com eles que você irá coletar qualquer dado digitados pelo usuário.

Então irei explicar todos os passos, e as tags envolvidas, para se criar um fórmulario, e coletar os dados usando PHP.

(more…)

Uma função muito útil é poder enviar e-mails, isso pode ser muito útil para criar formulários de contato, ou enviar os dados de novo registro, etc.

Para podermos enviar e-mais usando o php usamos a função mail()

Ela aceita alguns parâmetros como, Destinatário, Assunto, Mensagem para dividirmos as linhas da mensagem podemos usar o \n, e Cabeçalho o cabeçalho é de uso opcional. Os outros3 itens são de uso obrigatório.

Veja um exemplo:

<?php
mail(”email@exemplo.com”, “Um Assunto aqui”, “Bla Bla Bla\n Ha HA HA HA\n Pois é pois é pois é”,”Content-Type: text/html; charset=iso-8859-1″);
?>

é logico que na mensagem pode ser usado comandos HTML para formatar a mensagem.

Com isso é possível usar Um formulário em HTML e pegar os dados do usuario.

Irei ensinar 2 maneiras de redirecionar uma pagina, usando meta tag, e javascript, o meta tag tem a vantagem de permitir definir um tempo até que a página seja redirecionada, já usando javascript não tem essa opção.

Usando Meta tag

html>
<head>
<title>Redirecionando...</title>
<meta http-equiv="refresh" content="10;url=http://www.clubepc.org/"> <!---- adcione somente esta linha no cabeçalho, </head>

<body>
Depois de 10 segundo você será redirecionado para o site <b>Clube PC</b>.
</body>
</html>

em content=”10 esse 10 quer dizer o tempo em segundos que a pagina levará para ser redirecionada

Usando JavaScript

<html>
<head>
<title>Redirecionado...</title>
</head>
<body>
<span style="font-weight: bold;"> Esta página será
redirecionada para um novo endereço. Se não funcionar
após alguns segundos, clique </span> <a href="http://www.clubepc.org" target=_parent>aqui</a><br>
<br>
</body>
</html>

<script language="Javascript">
parent.top.location.href='http://www.clubepc.org';
</script>

ou também <script>window.location.href=’dicas.php’;</script>