Forms - Web DevelopmentYouTube↗  IA↗(long shot)
Education  6.2K views 16 likes 1 dislikes   22 Apr 2012
Udacity 651K subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
In this unit, we're going to talk about forms and how you get data
En esta unidad, hablaremos de forms y como obtener datos
from your browser to a web server, and we're not going to spend a whole lot of time here
desde el navegador a un servidor web, no vamos a perder mucho tiempo
on the sketch pad today, but first things first.
en el sketch pad, hoy. Pero primero lo primero.
What I want you to do is open a text file in your editor of choice
Quiero que abran un archivo de texto en el editor que quieran.
and put some text in it.
y le agreguen algún texto.
I'm in my editor here, and I'm just going to add some text, kind of standard text.
Aquí estoy en mi editor, y voy a agregar texto, uno habitual.
I save this file as play.html,
Lo guardo como play.html
and the next thing I want you to do is open this file in your web browser of choice.
Ahora lo que quiero es que abran el archivo en el navegador que quieran.
What we have here is the text that I entered in the editor here in the browser,
Aquí tengo el texto que ingresé en el editor, pero ahora en el navegador.
and if we were to go back to the editor and change something--
Y si volvemos al editor y cambiamos algo,
we'll change our word here--save it and then go back to the browser and reload,
cambiemos esta palabra, lo guardamos y volvemos al navegador y actualizamos,
you can see it live updates, so this is a handy way for kind of
puedes ver la actualización inmediata. Esto es útil para
playing with and experimenting with HTML in a real browser,
jugar y practicar con HTML en un navegador,
and we're going to be doing a fair amount of this today.
algo que haremos mucho el día de hoy.
The first thing I want to teach you about is HTML forms
Lo primero que quiero enseñarles son las forms de HTML
and the elements required to make them.
y los elementos que se necesitan para hacerlas.
We have another tag called "form," and it looks like this.
Tenemos una etiqueta que se llama form, es algo así.
And like many HTML tags, it has a closing form.
Y como la mayoría de las etiquetas HTML, tiene una fórmula de cierre.
We're going to go back and forth here, between our editor and our browser
Vamos a ir y venir entre el editor, el navegador
and here while I'm explaining things.
y aquí mientras les explico.
Let's enter this in our editor.
Ingresemos esto en el editor.
Here we are in our editor.
Aquí estamos en el editor.
I'm going to replace this text with that basic HTML tag I just showed you,
Vamos a reemplazar este texto con la etiqueta HTML básica que acabo de mostrarles.
.
Okay, there we go.
Muy bien.
We're going to save this, and we're going to go back to our browser and reload the page.
Vamos a guardar, y vamos a volver al navegador y actualizar la página.
Nothing is there. And why is that?
No hay nada ¿Y por qué?
Because we didn't enter any content.
Porque no ingresamos contenido.
Let's talk about the content that goes in an HTML form.
Hablemos del contenido de HTML form.
There are a few things that can go in here, one of which is an element called input,
Hay varias cosas que podemos colocar, el elemento input es una de ellas.
which looks like this.
Es así.
Let's enter that in our HTML editor.
Agreguémoslo al editor.
Okay, now we go back to our browser, and we reload this.
Bien, volvemos al navegador, y actualizamos
A-ha.
ahí está.
Now we have an input box, and we can type things in this box.
Ahora tenemos un campo de texto, donde podemos escribir lo que sea.
Pretty cool, huh?
Estupendo ¿no?
The input tag can take a couple of attributes,
La etiqueta input puede tener varios atributos
one of which is called "name," and name looks like this.
uno de los cuales es "name" que es así.
It's like all attributes.
Es como cualquier atributo.
We have the actual attribute, which in this case is called "name,"
Tenemos el atributo en sí, que en este caso es "name"
and then the value, which I've written here in red.
y el valor, que lo he puesto en rojo.
This can be whatever we want.
Puede ser lo que tu quieras.
Similar videos:

Locking and Memcache - Web Development
Udacity
5.6K views 16 likes 0 dislikes 27 May 2012100% match

Making Links
Udacity
53.9K views 21 likes 0 dislikes 23 Feb 2015100% match

Italics Solution - Web Development
Udacity
5.7K views 7 likes 1 dislikes 23 Feb 2015100% match

Memcached - Web Development
Udacity
13.5K views 115 likes 3 dislikes 23 Feb 2015100% match

Problems with Memcachedb - Web Development
Udacity
6K views 13 likes 0 dislikes 27 May 2012100% match

Italics
Udacity
49.1K views 16 likes 2 dislikes 23 Feb 2015100% match

HTML Basics
Udacity
16.5K views 75 likes 2 dislikes 16 Jul 2014100% match

Making Requests - Web Development
Udacity
5.8K views 10 likes 0 dislikes 23 Feb 2015100% match

Content Type - Web Development
Udacity
7.5K views 5 likes 1 dislikes 22 Apr 2012100% match

Web 简介
Udacity
25.7K views 60 likes 0 dislikes 23 Feb 2015100% match

Cache Architecture - Web Development
Udacity
7.2K views 16 likes 1 dislikes 27 May 2012100% match

Whitespace
Udacity
47.8K views 26 likes 4 dislikes 23 Feb 2015100% match

Query Parameters Solution - Web Development
Udacity
5K views 3 likes 1 dislikes 23 Feb 2015100% match

Web Applications - Web Development
Udacity
19.5K views 59 likes 4 dislikes 02 Jun 2014100% match

The Method Attribute - Web Development
Udacity
5.8K views 3 likes 0 dislikes 22 Apr 2012100% match

Install Google App Engine
Udacity
7.1K views 40 likes 48 dislikes 17 Apr 2012100% match

Shopping List Take 1 - Web Development
Udacity
841 views 1 likes 0 dislikes 23 Feb 2015100% match

Cookie Examples - Web Development
Udacity
5.4K views 29 likes 2 dislikes 23 Feb 2015100% match

Components of the Web
Udacity
28K views 54 likes 0 dislikes 23 Feb 2015100% match

Caching - Web Development
Udacity
12.1K views 102 likes 0 dislikes 23 Feb 2015100% match

User Agent Header - Web Development
Udacity
11.6K views 24 likes 7 dislikes 23 Feb 2015100% match

Introduction - Web Development
Udacity
23.3K views 107 likes 0 dislikes 23 Feb 2015100% match

Missing End Tag Solution - Web Development
Udacity
22.8K views 7 likes 0 dislikes 23 Feb 2015100% match

Part 2 - Web Development
Udacity
643 views 2 likes 0 dislikes 07 May 2012100% match

Valid Headers - Web Development
Udacity
7.9K views 1 likes 0 dislikes 23 Feb 2015100% match

Stateless - Web Development
Udacity
9.2K views 35 likes 8 dislikes 23 Feb 2015100% match

World Wide Web Solution - Web Development
Udacity
12.6K views 14 likes 0 dislikes 23 Feb 2015100% match

Document Structure
Udacity
7.2K views 24 likes 1 dislikes 23 Feb 2015100% match

Reddit - Web Development
Udacity
5.7K views 15 likes 0 dislikes 27 May 2012100% match

Passwords - Web Development
Udacity
4.9K views 5 likes 2 dislikes 22 Apr 2012100% match


Settings Privacy About Contact Donate