Okay. So here we are in our Editor again, and this is the basic HTML file
we were editing before and that we were opening in our browser.
We're going to go back to this a little bit so we can learn
some new form elements.
So the first thing I'm going to do is remove the Action parameter
from the Form element so that we can submit
the form to itself and we'll see the "q" parameter in the URL again.
This makes it easy to demonstrate what's going on,
without having to go back to our app Server and all of that stuff.
So I removed that; let's go to our browser and let's give this form a test.
So I reload the page,
I type in: "some junk" here,
which it autocompletes for me.
I click Submit,
and we see "some junk" in the URL:
q=some+junk.
Okay. Let's go back to our Editor.
So here we are in our Editor.
One thing that I'm leaving off is the Type parameter on this first input.
So let's go ahead and add that:
type="text"--
type="text" is the default type of an input parameter.
I didn't include it originally because I didn't want to
spend a whole lot of time talking about that, at the time.
But in reality, we want to be a little bit more specific with our types,
especially now that we're going to learn some new types.
So if I change that to type "text" the behavior won't change in the browser.
And the first thing we're going to do is learn a new type.
So instead of being "text"
we're going to change this to "password".
The "password" type is useful for entering passwords in a text box.
Okay--so here we are in our browser.
Now when we type some text into the box here,
it appears as dots instead of the actual text.
So for the next quiz, what I'd like you to do is
tell me what happens when I click the Submit button.
You can try this out on your own, at home.
Volvimos al editor,
este es el archivo HTML básico
que estuvimos editando,
y que abrimos en el navegador.
Volvemos a ésto para aprender
algunos elementos nuevos de form.
Primero voy a quitar el parámetro Action
del elemento form para poder enviar
form y veremos el parámetro "q" otra vez en el URL.
Así es más fácil de mostrar lo que sucede
sin tener que volver al app Server y todo eso.
Ya lo quité.
Ahora volvamos al navegador y probemos el form.
Actualizo la página
escribo "alguna tontera" aquí
se completa solo.
Hago click en Submit,
y vemos "alguna tontera" en el URL
q=alguna+tontera
Volvamos al editor.
Aquí estamos en el editor.
He estado dejando de lado el parámetro type
en esta entrada.
Lo agreguemos ahora.
type="text"
type="text" es el type por defecto en un parámetro de entrada.
No lo incluí antes porque no quería
perder el tiempo hablando de eso.
Pero la verdad es que
hay que ser más específicos con los types,
especialmente ahora que vamos a aprenderlos.
Cambiar el type a "text" no cambiará el comportamiento del navegador.
Lo primero que vamos a hacer es aprender un type nuevo.
En lugar que sea "text"
lo vamos a cambiar a "password"
el type "password" es útil para ingresar contraseñas
en un campo de texto.
Ahora estamos en el navegador.
Cuando escribimos un texto en este campo,
aparecen puntos en lugar de texto.
Para la próxima prueba, me gustaría
que me digas que sucede si oprimimos el botón Submit.
Pueden probarlo en casa.
テキストエディタでHTMLを編集します
これは前に使用したHTMLファイルです
この方式で新しいform要素を
学んでいきましょう
まずaction属性の値を削除します
これによりフォームに入力した文字列は
送信するとqの値としてURLに表示されます
Webアプリを使うよりこの方法で
お見せする方が分かりやすく簡単になります
ではブラウザで確認してみましょう
ページの更新をします
some junkと入力すると
オートコンプリートしてくれます
送信をクリックします
そして言葉がURLに表示されます
q=some+junk
ではエディタに戻ります
エディタを開いてください
type属性について説明をしましょう
typeと入れてみてください
type="text"
これはinput値のデフォルト設定です
これについて詳しい説明を
する気はありませんでした
しかし現実の世界ではtypeの指定は
よくあることです
いくつか種類をお見せします
type="text"と入力すると
ブラウザの表示は変わりません
type属性に別の値を指定しましょう
textと入れる代わりに
passwordと入れてください
このtypeはパスワードを入力する際に使用します
ブラウザで確認しましょう
この入力欄にテキストを入れてみます
文字はドットで表されます
ではここで小テストです
この状態で送信するとどうなるか
まずはご自分のPCでお試しください
Então estamos aqui novamente com o Editor.
e este é um arquivo HTML básico
que estávamos editando antes
e abrindo-o em nosso navegador.
Nós vamos voltar a ele um pouco
para podermos aprender
alguns novos elementos de formulários.
Então a primeira coisa que eu vou fazer
é remover o parâmetro action
do elemento Form para assim podermos enviar
o formulário para si mesmo e nós vamos ver
o parâmetro "q" na barra de endereços de novo.
Isso facilita na hora de demonstrar
o que está acontecendo,
sem ter que voltar para o nosso servidor
de aplicativos e toda aquela coisa.
Então eu removi isto; vamos voltar para
o navegador e testar esse formulário.
Então eu carrego a página,
digito "qualquer bobagem" aqui,
o que ele autocompleta para mim.
Clico em "Enviar",
e nós vemos "qualquer bobagem"
na barra de endereços:
q=qualquer bobagem.
Okay. Vamos voltar para o Editor.
Então aqui estamos no Editor.
Uma coisa que eu removi foi
o parâmetro Type, nesta primeira linha.
Então vamos em frente e
vamos adicionar isso:
type="text"
type="text" é o tipo padrão
para um parâmetro de entrada.
Não incluí isto no começo
porque eu não queria
passar um tempão falando
sobre isso naquela hora.
Mas na verdade, queremos ser um pouco mais
claros acerca dos tipos de nossos parâmetros
especialmente agora que vamos aprender
alguns novos tipos.
Então, se eu mudar isso para tipo texto,
o comportamento do navegador não vai mudar.
E a primeira coisa que vamos fazer é
aprender um novo tipo.
Então, ao invés de usarmos texto
nós vamos mudá-lo para "password" [senha].
O tipo "password" é útil para digitar
senhas em caixas de texto.
Okay - então aqui está o navegador.
Agora quando nós digitamos
algum texto aqui nessa caixa,
ele aparece como pontos
ao invés de texto legível.
Então, para nosso próximo teste,
eu quero que vocês me digam
o que acontece quando clico o botão "Enviar".
Vocês podem tentar isso em casa.