Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Interactive media > Web design2 > Flashcards

Web design2 Flashcards

1
Q

HTML FORMS

A

An HTML form is used to collect user input

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

INPUT ELEMENT TYPE- form

A

input type=”text”> Displays a single-line text input field
input type=”radio”> Displays a radio button (for selecting one of many choices)
input type=”checkbox”> Displays a checkbox (for selecting zero or more of many choices)
input type=”submit”> Displays a submit button (for submitting the form)
input type=”button”> Displays a clickable button

https://www.w3schools.com/html/html_forms.asp

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Structure of the form

A

form>
label for=”fname”>First name:</label><br></br>
input type=”text” id=”fname” name=”fname”><br></br>
label for=”lname”>Last name:</label><br></br>
input type=”text” id=”lname” name=”lname”>
</form

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Label and for attribute-form

A
  • The label> tag defines a label for many form elements.
  • The label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.
  • The label> element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the label> element, it toggles the radio button/checkbox.
  • The for attribute of the label> tag should be equal to the id attribute of the input> element to bind them together.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Radio buttons-form

A

Radio buttons let a user select ONE of a limited number of choices.

https://www.w3schools.com/html/html_forms.asp

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Checkbox-form

A

checkboxes let a user select ZERO or MORE options of a limited number of choices.

https://www.w3schools.com/html/html_forms.asp

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

The Submit Button

A

The <input></input> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form’s action attribute.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

HTML form attributes

A

* Action: Defines the action to be performed when the form is submitted.Usually, the form data is sent to a file on the server when the user clicks on the submit button
Target: specifies where to display the response that is received after submitting the form.
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe
Method:attribute specifies the HTTP method to be used when submitting the form data.
The form-data can be sent as URL variables (with method=”get”) or as HTTP post transaction (with method=”post”).
The default HTTP method when submitting form data is GET.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

HTML form elements

A

The HTML <form> element can contain one or more of the following form elements:

Tag Description
form> Defines an HTML form for user input
**input> **Defines an input control
textarea> Defines a multiline input control (text area)
label> Defines a label for an <input></input> element
fieldset> Groups related elements in a form
legend> Defines a caption for a <fieldset> element
**select> **Defines a drop-down list
optgroup> Defines a group of related options in a drop-down list
**option> **Defines an option in a drop-down list
button> Defines a clickable button
datalist> Specifies a list of pre-defined options for input controls
output> Defines the result of a calculation

https://www.w3schools.com/html/html_form_elements.asp

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

HTML input types

A

**input type=”button”>: **defines a button:
**input type=”checkbox”>: **Checkboxes let a user select ZERO or MORE options of a limited number of choices.
input type=”color”>
**input type=”date”>: **used for input fields that should contain a date.
**input type=”datetime-local”>: **specifies a date and time input field, with no time zone
input type=”email”>: is used for input fields that should contain an e-mail address.
**input type=”file”>: **defines a file-select field and a “Browse” button for file uploads.
**input type=”hidden”> **: defines a hidden input field (not visible to a user).
input type=”image”>:defines an image as a submit button.
**input type=”month”> : **allows the user to select a month and year.
input type=”number”>: defines a numeric input field
**input type=”password”>: **defines a password field:
input type=”radio”>: radio buttons let a user select ONLY ONE of a limited number of choices
**input type=”range”>: **defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100.
**input type=”reset”>: **defines a reset button that will reset all form values to their default values:
input type=”search”> : is used for search fields
input type=”submit”>: efines a button for submitting form data to a form-handler.
input type=”tel”>: is used for input fields that should contain a telephone number.
input type=”text”>: defines a single-line text input field
input type=”time”> : allows the user to select a time (no time zone).
input type=”url”>: is used for input fields that should contain a URL address.
**input type=”week”>: ** allows the user to select a week and year.

https://www.w3schools.com/html/html_form_input_types.asp

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

HTML input types attributes

A

Attribute Description
**checked **Specifies that an input field should be pre-selected when the page loads (for type=”checkbox” or type=”radio”)
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
**maxlength **Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
**readonly **Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
**value ** Specifies the default value for an input field
Placeholder: attribute specifies a short hint that describes the expected value of an input field (a sample value or a short description of the expected format).
Autofocus: attribute specifies a short hint that describes the expected value of an input field (a sample value or a short description of the expected format).
List: refers to a <datalist> element that contains pre-defined options for an <input></input> element. es como un select
**Autocomplete: ** allows the browser to predict the value. When a user starts to type in a field</datalist>

https://www.w3schools.com/html/html_form_attributes.asp

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

css form style

A

If you only want to style a specific input type, you can use attribute selectors:

  • input[type=text] - will only select text fields
  • input[type=password] - will only select password fields
  • input[type=number] - will only select number fields
  • Use the :focus selector to do something with the input field when it gets focus:

https://www.w3schools.com/css/css_form.asp

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

responsive forms

A

Resize the browser window to see the effect (the labels and inputs will stack on top of each other instead of next to each other on smaller screens)

https://www.w3schools.com/howto/howto_css_responsive_form.asp

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Accessibility Forms

A

https://www.w3schools.com/accessibility/accessibility_forms_intro.php

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

HTML Validation tool

A

https://validator.w3.org/

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

accesibility validation

A

wave tool

17
Q

Responsive Web Design

A

Responsive web design makes your web page look good on all devices.

Responsive web design uses only HTML and CSS.

Responsive web design is not a program or a JavaScript

https://www.w3schools.com/css/css_rwd_intro.asp

18
Q

Viewport

A

The viewport is the user’s visible area of a web page.

The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

To set up the viewport you must be: meta name=”viewport” content=”width=device-width, initial-scale=1.0”

19
Q

Grid

A
  1. A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window.
  2. First ensure that all HTML elements have the box-sizing property set to border-box.
  3. First we must calculate the percentage for one column: 100% / 12 columns = 8.33%.
  4. Then we make one class for each of the 12 columns, class=”col-“
  5. All these columns should be floating to the left, and have a padding of 15px:
  6. The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning
    7.

https://www.w3schools.com/css/css_grid.asp

20
Q

Grids properties

A

column-gap Specifies the gap between the columns
gap A shorthand property for the row-gap and the column-gap properties
grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
grid-area Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties
grid-auto-columns Specifies a default column size
grid-auto-flow Specifies how auto-placed items are inserted in the grid
grid-auto-rows Specifies a default row size
grid-column A shorthand property for the grid-column-start and the grid-column-end properties
grid-column-end Specifies where to end the grid item
grid-column-gap Specifies the size of the gap between columns
grid-column-start Specifies where to start the grid item
grid-gap A shorthand property for the grid-row-gap and grid-column-gap properties
grid-row A shorthand property for the grid-row-start and the grid-row-end properties
grid-row-end Specifies where to end the grid item
grid-row-gap Specifies the size of the gap between rows
grid-row-start Specifies where to start the grid item
grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties
grid-template-areas Specifies how to display columns and rows, using named grid items
grid-template-columns Specifies the size of the columns, and how many columns in a grid layout
grid-template-rows Specifies the size of the rows in a grid layout
row-gap

21
Q

Media Queries

A

Media query is a CSS technique introduced in CSS3.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.
* Add a Breakpoint: Use a media query to add a breakpoint at 768px: hen the screen (browser window) gets smaller than 768px, each column should have a width of 100%:
* Always Design for Mobile First

looks website

https://www.brainscape.com/l/dashboard/interactive-media-21333312/decks/13760848/cards/new-18/edit

22
Q

Typical Device Breakpoints

A

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {…}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {…}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {…}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {…}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {…}

23
Q

Responsive img or videos

A

*** Scale up an down with width property: ** set it like this:
img {
width: 100%;
height: auto;
}
Using The max-width Property: the image will scale down if it has to, but never scale up to be larger ]
img {
max-width: 100%;
height: auto;
}

24
Q

Frameworks

A
  • W3.CSS}
  • Bootstrap
25
Q

CSS grid

A
  1. GRID CONTEINER: Display: grid or inline-grid
  2. Explicit Grid: grid-template-rows , grid-template-columns.
  3. Minimum and Maximum Grid Track Sizes: minmax() function accepts 2 arguments: the first is the minimum size of the track and the second the maximum size.
  4. Repeating Grid Tracks: grid-template-rows: repeat(4, 100px); grid-template-columns: repeat(3, 1fr).
  5. Grid Gaps (Gutters): Grid gaps are only created in between columns and rows, and not along the edge of the grid container 🙌 .
  6. Positioning Items by Grid Line Numbers: grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;

https://learncssgrid.com/

Interactive media (3 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions