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

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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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

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 0134 term 2181

<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 0134 term 2181

<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 0134 term 2181

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="email"> will make sure it's an email address. <input type="tel"> will make sure it's a phone number. 11/6/2017 CS 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

<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 0134 term 2181

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 0134 term 2181

Forms and fieldsets

<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 0134 term 2181

<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 0134 term 2181

Lab tiiiime 11/6/2017 CS 0134 term 2181