1) every form starts with <form> and also ends with </form> to be able later get input in JS (tutorial for JS later).
2) you can use <label> to add some text over input thing (also CLOSE TAG)
3) to have a border over all form use <fieldset> tag (and end it before ending form tag =p)
list of input types:
• text input.
<input type="text"> </input>
if you dont want to make form tag you can also use plain because type="text" is default type
<input> </input>
for bigger area of text use plain (no form tag required)
<textarea> </textarea>
• password (similar to text input but displays dots instead of typed characters)
<input type="password"> </input>
• radio checkboxes where only one can be selected (if form isnt modified by JS)
<input type="radio"> </input>
lol
• checkbox - similar to radio but allows zero answers OR multiple answers
<input type="checkbox"> </input>
lol
• button (what to say more?)
<input type="button"> </input>
OR
<button> </button>
note - second tag can exist outside form tag as a regular part of a page
• color picker (gives you system dialog to choose color, sometimes might be restricted to chosen colors, depending on system configuration)
<input type="color"> </input>
• date (date chooser system dialog)
<input type="date"> </input>
<!-- DO NOT MISTAKE WITH DATES WITH YOUR LOVE!!! -->
• email - on desktop browser its not very visible but some mobiles add other characters on keyboard and/or address prediction, generally as name says - for email
<input type="email"> </input>
• file (system dialog for choosing files, if scripted even allows folders - depending on system configuration)
<input type="file"> </input>
• number. similar to text input but filters other characters than numbers OR changes keyboard on mobile devices
<input type="number"> </input>
• range - slider across screen to choose a number (mostly)
<input type="range"> </input>
• phone. changes keyboard on mobile devices and restricts most alphabet chars. for putting in mobile/other number
<input type="tel"> </input>
• time. selects time - hour and minute (differently for every operating system and browser)
<input type="time"> </input>
• url. very similar to email field
<input type="url"> </input>
• to make a dropdown list use
<select>
and define every dropdown value using <option>
like:
<select>
<option> lol </option>
<option> xd </option>
<option> kekw </option>
</select>
• datalist for making dropdown lists with text input (something need to be inputted to see selections). good for example for search.
<input list="here give datalist id"> <datalist id="id">
and for every thing inside dropdown use option (same as in dropdown) but add value="" to the tag instead of putting text between 2 tags
next part with form values next week =p
note: you can also open browser inspector to learn a little more ;)
No comments:
Post a Comment