1. CS 0134 (term 2181) Jarrett Billingsley
Inputs and Forms
CS 0134 (term 2181)
Jarrett Billingsley

2. Class announcements I just… don't like jQueryUI.
The book talks about it a good bit, so if you want to play around with it, feel free!
Lab grading…
Today's lab is optional, but you'll still need to know this stuff for future labs and the quiz/final!
11/6/2017
CS term 2181

3. Tips to work faster
"Cut" does the same thing as "copy and then delete."
Don't use Internet Explorer ever! Right-click, "Open With…"
Keep your browser open, and reload the page, instead of closing it and reopening it every time.
Alt+tab (windows) or Cmd+tab (mac) make it really quick to switch applications.
11/6/2017
CS term 2181

4. Quotes in jQuery's $() You can put ANY CSS selector in quotes
$(".classname")
$("#idname")
$("nav > ul > li")
$("img.classname")
$("tbody tr:nth-child(even)")
Other things don't use quotes!
$(document)
$(this)
$(idname) instead of $("#idname") 😲
But the "#" way is a bit more robust.
11/6/2017
CS term 2181

5. Inputs For real this time
11/6/2017
CS term 2181

6. COOL! Sliders! Radio Check but- box- tons! es! Buttons! NEAT! Browse…
Inputs
Usually you need to go beyond simple links.
Inputs are just what they sound like, and there are many kinds.
Text boxes!
Buttons! 11
Sliders!
NEAT!
Radio
but-
tons!
Check
box-
es!
Browse…
File uploaders!
COOL!
11/6/2017
CS term 2181

7. <input type="button"> <input type="text">
The <input> tag
All these are made with the <input> tag, but with a different type.
<input type="button">
<input type="text">
<input type="file">
<input type="radio">
<input type="range">
<input type="checkbox"> OK
hello
Browse…
yorp
dorp
11/6/2017
CS term 2181

8. <input type="text" name="uname" id="uname">
What's in a name?
You'll see the name attribute put on inputs a lot:
<input type="text" name="uname" id="uname">
The name is used for server-side processing.
It's totally different from the ID.
You can mostly forget about name for this class! Just put IDs.
You'll use the ID to do scripting stuff.
11/6/2017
CS term 2181

9. Kinds of text inputs We used <input type="text"> last week!
Remember what placeholder does?
There are a few more common ones:
<input type="password"> hides what you type.
<input type=" "> will make sure it's an address.
<input type="tel"> will make sure it's a phone number.
11/6/2017
CS term 2181

10. Buttons and file browsers
These look and work similarly.
The value attribute is the text that shows up on the button.
<input type="button" value="No!!!">
<input type="file" value="Choose image">
No!!!
Choose image
No file selected.
Don't forget to put IDs on each input!
I left them out for space.
Well that kinda looks like garbage.
But how can we style them?
11/6/2017
CS term 2181

11. Styling inputs with CSS
If you just used the input selector, it'd affect every kind of input.
So we can use – you guessed it – a new kind of selector!
input[type="button"] {
/* only affects buttons */ }
This works for any tag, not just inputs!
img[src="logo.png"]
a[href="#about"]
section[id="gallery"] wait a second…
section#gallery same but shorter!
11/6/2017
CS term 2181

12. A more flexible kind of button
The <button> tag is like <input type="button"> but you can put anything inside it.
<button type="button">
<img src="cart.png"> Check out!
</button>
We'll see why we still have to put type="button" shortly.
Check out!
11/6/2017
CS term 2181

13. button { /* the default look. */ }
Styling buttons
They're kinda like links, so similar rules apply.
button { /* the default look. */ }
button:hover { /* mouse over it. */ }
button:active { /* clicking it! */ }
:active works on anything, too, just like :hover.
11/6/2017
CS term 2181

14. Making choices Checkboxes let the user select multiple things.
Radio buttons let the user select one thing.
For these, the value doesn't show up. Put text after them.
<input type="checkbox" value="pep"> Pepperoni <br>
<input type="checkbox" value="ec"> Extra cheese <br>
For radio buttons, use name instead of id! All radio buttons with the same name will be "connected."
<input type="radio" name="crust" value="p"> Plain <br>
<input type="radio" name="crust" value="g"> Gluten-free <br>
11/6/2017
CS term 2181

15. <select id="bears"> <option value="">Choose a bear!
Dropdown boxes
If you wanna choose from many things, a dropdown box is the best choice.
These work kinda like a list.
Each option needs a value. jQuery's .val() function will give you this value.
<select id="bears">
<option value="">Choose a bear!
<option value="black">Black bear
<option value="brown">Brown bear
<option value="polar">Polar bear
</select>
What do you want??
11/6/2017
CS term 2181

16. Getting values in jQuery
To do something with the values in the inputs, we need to look at them with JavaScript.
Below, replace this text with whatever you need.
For checkboxes, use:
var x = $("#id").is(":checked")
For radio buttons, use:
var x = $("input[name='name']:checked").val()
For dropdowns, use:
var x = $("#id").val()
11/6/2017
CS term 2181

17. Forms and fieldsets

18. <form id="subscribe"> <input type="..."> ... </form>
Forms
Forms are mainly used for sending information to a server.
We won't really get into that…
But they're nice for grouping things together in a sensible way.
Usually we put an ID on the form:
<form id="subscribe">
<input type="...">
...
</form>
11/6/2017
CS term 2181

19. <fieldset id="shipping">
Fieldsets
Another way of grouping things is with a fieldset.
This gives you a nice caption and border!
You set the caption with … <legend>. (c'mon, HTML.)
<fieldset id="shipping">
<legend>Shipping information</legend>
<input type="...">
...
</fieldset>
11/6/2017
CS term 2181

20. Lab tiiiime
11/6/2017
CS term 2181