Forms: Single Line Text Input Box

FORMS
Data is written on not

the URL address
● <form>
● Allows you to gather feedback from More prone to Less prone
your readers or visitors and work on hacking
the data to provide better service
Not be used in Used in submitting
● Present a variety of means for users submitting personal personal data
to key in information data
- Textboxes
- Password boxes
INPUT
- Radio buttons
● <input>
- Check boxes
● Used for making text boxes,
- Dropdown menu
password boxes, check boxes, radio
- Text areas
buttons, submit buttons, reset
- Submit button
buttons
- Reset or clear buttons
ATTRIBUTES FOR INPUT
Attributes
● Name
● Action
- Assigns a name to the input
- indicates where the
field
information will be submitted
● Type
- Specifies the form-
- Indicates the type of input
handler/page-handler page,
field
usually a .php page in the
● Size
server-side where the data is
- Indicates the size of the input
processed
field
- <form
● Value
action=”sample.html”></form
- Indicates the initial value of
>
the field
● Method
- indicates the method of
CREATING A TEXTBOX
submitting the information
● Textbox
- Defines the HTTP method to
- Single line text input box
use when submitting input
- Used for username input and
data to the form-handler
other single line texts {ex.
page
Name, email address}
- Get or post
- Can be made by keying in
- <form method=get> </form>
text as the value of the type
attribute of input
GET POST ● Ex. <input type=”text”>
Default Not default CREATING LARGE TEXT AREA

Less Secure More secure ● Input field that can span several
rows and columns to allow the
readers to enter their feedback, - Size (number of visible
requests, instructions, options or items)
any communication ● For each individual item:
● <textarea></textarea> <option></option>
● Attributes: ● Attributes of option
- Name (name of input field) - Value (name of the menu
- Rows (height of the text item)
area) - Selected (indicates the
- Cols (width of the text area) default selected item)
CREATING RADIO BUTTONS SUBMIT BUTTON

● Radio buttons ● Usually places at the end of forms
- Provide the users a variety ● Submits the information input
of choices where only one ● Can be made by keying submit as
can be selected the value of type attribute of input
- Can be made by keying ● Ex. <input type=”submit>
radio in the type attribute of ● Value attribute indicates the label on
input the button
- Should have the same name
throughout RESET BUTTON
● Ex. <input type=”radio” ● Usually places at the end of a form
name=”yeah”> ● Clears all the input information
● Can be made by keying in reset as
CREATING CHECK BOXES the value of type attribute of input
● Check boxes ● Ex. <input type=”reset>
- Offer users a variety of
choices where none, only INTRODUCTION TO CSS
one or many may be
selected CSS
- Can be made by keying in ● Cascading Style Sheet (CSS)
checkbox in the type ● Style sheet language
attribute of input ● Used for describing the look and
● Ex. <input type=”checkbox”> formatting of a document written in
a markup language
CREATING DROP DOWN MENUS ● Adds style to HTML document
● Drop-down list ● Cascading
- Offer users a variety of - Procedure that determines
choices where only one can which style will apply to a
be selected certain section
● <select></select> ● Style
● Attribute of select - How you want a certain part
- Name (name of the of your page to look
dropdown menu) ● sheet
- Are like templates
- Determines how the ● Directly affects the tag they are
webpage will look written in, without the use of
selectors
CSS and HTML
HTML CSS
Define the page’s Define the look of

content the content and
webpage
Structural Presentational
language language
Describe the Describe INTERNAL CSS

structure presentation ● Embedded in the <head> section of
the HTML document
● Consistent ● Defined inside a <style> tag
● Readable ● Also known as Embedded Style
● Accessible Sheet
● Manageable
● Appealing
STYLE RULE
● Composed of four parts: selector,
declaration, property, and value
● Selector - indicates the HTML
element you want to style
● Declaration - determines the
property and values of a selector
● Property - specifies characteristic
(ex. Colon, font-family, etc.); EXTERNAL CSS
followed by a colon
● change the look of entire website by
● Value - expresses specification of
changing just one file
a property; followed by a semicolon
● Each page must include a reference
to the external style sheet file inside
the <link> element
● The <link> element goes inside the
<head> section
TYPE OF CSS ● The external style sheet must be
saved with a .css extension
INLINE CSS ● <link rel=”stylesheet”
● Useful for styling a single element href=”filename.css>
● Using the style attribute
STEPS IN USING EXTERNAL CSS
1. Create a folder in your root - can apply style rules to
directory. specific HTML tags
2. Save the HTML file in that folder. - can control individual HTML
3. Save the style.css file in that folder. element formatting
4. Run/Open the HTML file using any ● Defined by dots (.).
browser. ● There are two ways in writing class:
- Indicating the HTML element
DISPLAY PROPERTIES followed by a dot (p.sample)
● Block level - laid out vertically - class name preceded by a
● Inline level - laid out horizontally dot (.sample)
DIV TAG
● <div></div>
CLASS ID SELECTOR
● Divides the contents of a webpage SELECTOR
into sections
● Apply styles to different sections of A style applied to a A style element
a web page particular set of applied to one
● Provide line spacing before and elements element on a page
after a block element Defined by # and
● Block level element - applied to uses the attribute
block HTML and should not be used "id"
within a paragraph
MULTIPLE SELECTORS
SPAN TAG ● When two or more selectors have
● Inline level element - usually the same properties and values, a
applied to block HTML and should comma is used to separate the
not be used within a paragraph. selectors and only use one set of
● Emphasize words/sentences properties and values
<div></div> <span></span> GROUPING MULTIPLE SELECTORS

● Selectors can be grouped and
Has line breaks Doesn't have line combined by inserting a comma
before and after breaks
between different selectors.
Block level element Inline level element
NESTING SELECTORS
For larger chunks of For small chunks of ● Nested Selectors can also be used
codes codes by applying a style for a selector
within a selector.
ATTRIBUTE FOR DIV AND SPAN
● Class - indicate the CSS style to be SETTING DIMENSIONS
applied ● CSS can also be used to manage
dimensions of certain HTML
CLASSES elements
● user-defined selectors where you:
PROPERTIES FOR DIMENSIONS
:visited Sets visited link
PROPERTY DEFINITION (a:visited{...}) characteristic
or effect
Visibility Indicates if an
element is visible or :active (a:active{...}) Sets the character
hidden of an active link
element as when
Width Indicates the width the user clicks the
mouse on the link
Height Indicates the height
:hover (a:hover{...}) Sets the character
Line-height Indicates the line of a link element as
spacing when the user
hovers or moves
Max-height Indicates the the
maximum height mouse on the link
Min-height Indicates the :focus (a:focus{...}) Sets the character
minimum height of an active link
element as when
Max-width Indicates the the user clicks and
maximum width moves the mouse
on the link
Min-width Indicates the
minimum width
FORMATTING TEXT WITH CSS
PSEUDO-CLASS AND LINKS
● Defined by a colon (:) TYPOGRAPHY
● Not user-defined ● Font-family (typeface)
● The anchor element has four ● Font-style (italic, oblique, normal)
pseudo-classes: ● Font-weight (thickness of the
- link characters) (100-900) (normal, bold
- visited or numbers)
- hover ● Font-size (size)(xx-small hanggang
- active xx-large)(number na may px or %)
● Specific pseudo-classes can be ● Font-variant (small caps) (normal,
used on specific HTML elements small caps)
only. ● Text-align (alignment) (left, right,
center, justify)
PROPERTIES OF PSEUDO CLASS AND ● Text-decoration (none, underline,
LINKS overline, line-through, blint, sub
super)
● Text-transform (none,
Property Description capitalize,uppercase, lowercase)
:link (a:link{...}) Sets unvisited link ● Line-height (line spacing) (normal,
characteristic any number with px, or point or
percent)
● Text-indent (first line of paragraph) CREATING LINE SPACING
(indention)(length, percentage) ● Line-height
CSS STYLES CHANGING COLOR OF TEXT

● Font-weight ● Color
● Font-style ● Acqua,black, blue, fuchsia, gray,
● Font-family green, lime, maroon, navy, olive,
● Font-size purple, red, silver, teal, white and
● Color (text color) yellow
● font -variant ● 150 color names supported
● Letter-spacing (2px)(spacing ● Hex value
between letters) ● Pwedeng rgb (tapos yung
● word -spacing (10px) (spacing percentage or values)
between words) ● Pwedeng inherit (inherit color from
● Line-height (height between lines) parent lang)
● Text-align
ADDING BACKGROUND COLOR TO A
CREATING A BOLD TEXT TEXT
● Font-weight ● Color behind a text
● Bold, bolder, lighter and normal ● Background property
● 100-900
ADDING A BORDER
CREATING AN ITALIC TEXT ● Border property
● Font-style ● Border-style (solid, double, groove,
● Italic, oblique and normal rodge, inset, outset, dotted or
dashed)
INDENTING TEXT
● First line of the paragraph indented CREATING LISTS
● Text-indent ● List-style-type (type of bullet)(disc,
● Px,mm,cm,in,pt,pc,ex,em circle, square, decimal(numbering),
● Percentage decimal-leading-zero (01 ganun),
lower-roman, upper-roman, lower-
CHANGING THE FONT alpha (lowercase alphabet), upper-
● Font-family alpha (uppercase alphabet))
● List-style-image (image to be used
CHANGING THE FONT SIZE as bullet)
● Font-size ● List-style-position (position of the
● Pt,px,mm,cm,in,pc,ex,em border)
● Xx-small hanggang xx-large ● List-style (properties for lists)
TEXT ALIGNMENT PSEUDO-ELEMENTS

● Text-align ● Allow you to format a specific part or
● Left, center, right and justify interval parts of HTML elements
● Defined the same way pseudo-
classes are defined
● Same lang nung coeds sa a
● :first-letter (selects the first letter of
p)
● :first-line (selects the first line of
every <p> element)
● :before (inserts content every p)
● :after (inserts content after every
<p> element)

Forms: Single Line Text Input Box

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Forms: Single Line Text Input Box

Uploaded by

Copyright:

Available Formats

FORMS

Data is written on not

Default Not default CREATING LARGE TEXT AREA

CREATING RADIO BUTTONS SUBMIT BUTTON

Define the page’s Define the look of

Describe the Describe INTERNAL CSS

<div></div> <span></span> GROUPING MULTIPLE SELECTORS

CSS STYLES CHANGING COLOR OF TEXT

TEXT ALIGNMENT PSEUDO-ELEMENTS

You might also like