Criando um site – Parte 8

Olá pessoal! Hoje eu vou continuar aquele tutorial “Criando um site“. Se você não conhece, o link das duas partes anteriores:

Hoje eu vou ensinar a vocês como criar caixas de grupo (aquelas bordinhas em volta das opções), botões com imagem e caixas de texto para upload de arquivos.

Vamos lá?

Então, tá. Você já viu um formulário neste espaço de tempo entre a parte 7 e a parte 8 do tutorial. Você achou algumas coisas nele que eu não citei? OK, vamos começar pelas caixas de grupo (ou groupbox)!

Para criá-las, aí está a receita:

<fieldset style="width:300;"> <!-- A caixa de grupo O atributo style vamos ver mais para a frente, é CSS, o comando dá uma largura fixa de 300 pixels --> <legend> <!--O texto em volta da mesma --> Texto</legend>
Exemplo 1: <input type="text"/><br/>
Exemplo 2: <input type="text"/><br/>
</fieldset>

Se você quiser, copie e cole (entre as tags <body> e </body>, né?) é verás um resultado semelhante ao abaixo:

Imagem da caixa de grupoAgora, vamos ao botão com a imagem. Para fazê-lo, os ingredientes são:

<input type="image" src="imagem.gif" alt="Enviar" title="Enviar" />

O atributo src indica a imagem a ser usada. O atributo type com valor image indica que é uma imagem ali. Isso é bom se quiser fazer ações clicando nas imagens (ações na Parte 13)

E depois vamos ao final: áreas para upload de arquivos.

Upload de arquivos

Isso não é lá muito importante agora, vai ser lá pra frente, nas linguagens PHP e ASP. Eles comandam o upload. Você só vai poder fazer a parte visual, a parte visível.

Mas não é por isso que devemos deixar de lado. E se um determinado tutorial não ensine como fazer isso? É por isso que eu vou ensinar. Então…

<input type="file" name="arquivo" size="80" />

Este controle tem o nome de arquivo e o tamanho 80. O controle tem diferentes aparências nos navegadores. Veja a aparência, se estiver executando o Google Chrome (como eu 😉 )

Observe que nenhum arquivo está selecionado. Selecione um. E é bom criar um submit para enviar o arquivo.

Como lição (para estudo), crie um formulário com tudo listado aqui e em todas as outras partes e mande-o por e-mail para você. Não se esqueça que deve ter um software de e-mail instalado.

E na próxima parte: a grandiosa folha de estilos CSS!!! Tão esperada, ela permite mudar todo o design do seu site. Mas só na próxima parte, tá? Tchau 🙂

Anúncios

Publicado em 02/10/2010, em Nível alto, Nível médio, tutoriais e marcado como , . Adicione o link aos favoritos. 2 Comentários.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: