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:
Agora, 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
Publicado em 02/10/2010, em Nível alto, Nível médio, tutoriais e marcado como arquivos, web. Adicione o link aos favoritos. 2 Comentários.
Pingback: Criando um Site – Parte 7 « Informação é aqui! Arthur Up
Pingback: Criando um site – Parte 9 | Informação é aqui! Arthur Up