HTML forms objects

input

input has many types


text            --> regular single line text box
password        --> masked text box
textarea        --> multiline text
number          --> numbers only
e-mail          --> with @
tel             --> numbers
url             --> for urls
button          --> a button
radio           --> all object with the same in will be in the same group, checked is the default
reset           --> like reset button
checkbox        --> checked - on
select          --> dropdown box - required
list            --> dropdown box - optional
color           --> color picker
date            --| 
week            --|--> date in different resolutions
month           --|
time            --> hour and minutes
datetime        --> both date and time in the same input box
file            --> file browser
image           --> image browser
range           --> trackbar/slider
search          --> search (like textbox, only visual difference)
hidden          --> no visible but sent to the server
and many more......

input has many attributes


name            --> the name of the imput , as it will be sent to the server
value           --> the default text in the input
autocomplete    --> to allow autocomplete in the input box, if exists
autofocus       --> to set focus of the container on page load
required        --> must be filled
readonly        --> cannot be filled
disabled        --> greyed out
size=""         --> the size of the box
minlength=""    --> nim length only if written (if not required, can be left empty)
maxlength=""    --> max length only if written
autofocus       -->focus on this input when page loaded
form=""         --> to be a part of the form although written outside
list=""         --> a drop down list (referenced in a )
tabindex=""     --> the order of TAB
These are all client side validations
** when a submit button is pressed and a field is wrong it get a :invalid
** using input:invalid can be used in css to style the field
as demonstrated in the Name input below


Server-Side validation on the fly, before SUBMIT is called AJAX

This is a sample form:
Label Input box Type of imput box
  • text, required, length 3-10
  • styled as pink when :invalid
textArea
phone number - xx-xxxxxxx
Select:
  • list of options from a select element
  • the first item is selected and disabled
    		•
    password
    select one:
    Choice1
    Choice2
    Choice3
    Choice4
    Other1
    Other2
    • all Radio buttons with the same name grouped together
    • checked attribute make default
    • The value will be sent to the server
    Allow:
    Accept ?
  • checked attribute make default
  • on checked sends Value or 'on'
  • on unchecked , sends nothing!!
    		•
    Color: Choose a Color:
    • The name will be sent with the HexRGB value
    • "myColorName": "#00ff00"
    Date:
    Month:
    Week:
    Time:


    • Will be sent as yyyy-mm-dd format
    • Will be sent as yyyy-mm format
    • Will be sent as yyyy-Www format
    • Will be sent as HH:MM:SS (24h based)
    Range:
    • min="0" max="100" value="15"
    Search:
    • Like Text
    url:
    • Will be sent as is
    • button inside a form with no specified type is submit
    • input type="submit" is like button
    • in button , the text can contain HTML code
    • A button with reset type
    • will clear the form to detault
    button with type "button" inside a form will act as a regular button
    When the user fills in the details as:
    The data sent to the server will be:
    
"args": {
    "Group1": "Choice3", 
    "Group2": "Other2", 
    "age": "46", 
    "browsers": "chrome", 
    "chk": "checked", 
    "pass": "guy", 
    "tel": "04-6176688", 
    "user_mail": "guy@yahaloms.com", 
    "user_message": "Just a massage", 
    "user_name": "Guy"
    },
    the data is sent in AlphaBet order

    Button - all preferences

    type in form out of form
    no type specified submit nothing
    submit submit submit
    button do not submit do not submit
    reset reset form not applicable
    back to main page