Brainscape's Knowledge GenomeTM

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


See full index

Programming > HTML Foundation > Flashcards

HTML Foundation Flashcards

1
Q

What is doctype and how is it written?

A
  • In HTML, the doctype is the required “<!DOCTYPE html>” preamble found at the top of all documents.
  • Its sole purpose is to prevent a browser from switching into so-called “quirks mode” when rendering a document; that is, the “<!DOCTYPE html>” doctype ensures that the browser makes a best-effort attempt at following the relevant specifications.

< !DOCTYPE html >

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

How do you add references to scripts in your page?

A

The < script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code.

< script src="javascript.js"></script >

< script>
  alert("Hello World!");
< /script>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is an area lable?

A

Its for text readers.

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

What does HTML stand for and what does it mean?

A

HyperText Markup Language

  • HyperText refers to pieces of text that can link to other pages or resources. (the first ever website had a lot of links)
  • Markup Language - HTML Tags are used to create markup which tells the browser how to interpert and display components on the website.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

How many heading levels are there?

A

6 - h1 to h6

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

How many heading levels are there?

A

6 - h1 to h6

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

What is best practice when using multiple types of headings?

A
  1. Use only one < h1 > heading per page. This is the title of the page.
  2. Do not skip heading levels. Screen readers use headings to quickly skip through content on a page. Dont have < h1 >< /h1 >< h3>< /h3>< h4>< /h4>.
  3. You can nest headings in lists with lists to help screenreaders.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is the linebreak html element and what is good practice about using it?

A

< br >

  • The purpose is to break a line of text into a new line.
  • It is bad practice to add margins on br tags to create line spacing, rather use the line-height property that was designed for this purpose.
  • It is not mean to to create spaces between paragrahps. For that ise the < p> element and use css margin property to create space.
  • Creating parahraphs with < br> tags is problematic for screen reading technology.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Why does it matter if you use good practice with HTML

A
  • Many of the best practice recommendations are about accessiblity via screenreaders.
  • Cross-browser and cross device compatibility relies on best practice being followed. Some browsers interpret certain things differently, so to be predictable its best to follow good practice.
  • Predectibility for other developers. If you follow best practice others will know where to look and what to change.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is Quirks mode?

A
  • web, pages were typically written in two versions: One for Netscape Navigator, and one for Microsoft Internet Explorer.
  • When the web standards were made at W3C, browsers could not just start using them, as doing so would break most existing sites on the web. Browsers therefore introduced two modes to treat new standards compliant sites differently from old legacy sites
  • There are now three modes used by the layout engines in web browsers: quirks mode, limited-quirks mode, and no-quirks mode.
  • In quirks mode, layout emulates behavior in Navigator 4 and Internet Explorer 5.
  • This is essential in order to support websites that were built before the widespread adoption of web standards.
  • In no-quirks mode, the behavior is (hopefully) the desired behavior described by the modern HTML and CSS specifications. In limited-quirks mode, there are only a very small number of quirks implemented.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Why are some html elements self closing? Do they need the slash?

A

Self closing tags mean they do net have content like <br></br> or <br></br>

In HTML 5 a void element (one that does not have content) does not need a closing slash.

The slash at the end of the closing tag is an XHTML thing, but HTML 5 does not require it.

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

What is the horizontal rule tag, best practice and attributes applicable?

A

< hr> Represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

HR is not actually meant for styling, its more semantic. For actually lines use CSS.

Besides the global attributes you can also use the following:

align Deprecated Non-standard
Sets the alignment of the rule on the page. If no value is specified, the default value is left.

color Deprecated Non-standard
Sets the color of the rule through color name or hexadecimal value.

noshade Deprecated Non-standard
Sets the rule to have no shading.

size Deprecated Non-standard
Sets the height, in pixels, of the rule.

width Deprecated Non-standard
Sets the length of the rule on the page through a pixel or percentage value.

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

What is an HTML attribute?

A

Its information in the html element that tells the browser how to interpret it. e.g. < hr size=”3” >

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

What are global attributes?

A

Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.

The list can be found here - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes

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

How do you write a comment in HTML?

A

< !– comment here – >

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

Write the HTML Boilerplate.

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

what is the < html lang="eng" >< /html> tag

A
  • This is the HTML root element and represents the root/top level of an HTML document.
  • ALL other elements are decendants of this element.
  • Its permitted content is a <head> element followed by a <body> element.
  • The lang attributed will tell screen readers how to interpet the website.
  • HTML 5 does not require the HTML tag, but its good for adding the lang tag or styling.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What is the <head> element?

A
  • The Document Metadata (Header) element. It follows the <html> element.
  • Contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.
  • It does not display in the browser.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What is the <title> element?

A
  • Written <title></title>.
  • Defines the title that is shown in the title bar.
  • It only contains text and is always in the head lement.
  • Page titles are important for SEO.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What is the <link>element?

A
  • Written <link>.
  • The External Resource Link element.
  • Its a self closing tag.
  • It specifies the relationship between the current html document and an external source. Commonly used to link stylesheets.
  • To link an external stylesheet write <link href="main.css" rel=stylesheet">
  • To link a favicon write <link rel ="icon" href="favicon.ico">
  • There are a number of other icon rel values, mainly used to indicate special icon types for use on various mobile platforms.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What is the <style> element and its best practice?

A
  • The <style> element must be included inside the <head> of the document. In general, it is better to put your styles in external stylesheets and apply them using <link> elements.
  • If you include multiple <style> and <link> elements in your document, they will be applied to the DOM in the order they are included in the document — make sure you include them in the correct order, to avoid unexpected cascade issues.
  • In the same manner as <link> elements, <style> elements can include media attributes that contain media queries, allowing you to selectively apply internal stylesheets to your document depending on media features such as viewport width.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What are media queries?

A
  • Introduced in CSS3
  • Media queries are not limited to CSS. They can be used in other languages such as JavaScript and HTML. However, CSS is the most common language used for media queries
  • Media queries allow you to apply CSS styles depending on a device’s general type or other characteristics such as screen resolution or browser viewport width.

Media queries are used for the following:
- To conditionally apply styles with the CSS @media and @import at-rules.
- To target specific media for the <style>, <link></link>, <source></source>, and other HTML elements with the media= attribute.
- To test and monitor media states using the Window.matchMedia() and EventTarget.addEventListener() methods.</style>

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

What is the <meta> element and what special attributes can it have?

A
  • The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.
  • If the name attribute is set, the <meta> element provides document-level metadata, applying to the whole page.
  • If the http-equiv attribute is set, the <meta> element is a pragma directive, providing information equivalent to what can be given by a similarly-named HTTP header.
  • If the charset attribute is set, the <meta> element is a charset declaration, giving the character encoding in which the document is encoded.
  • If the itemprop attribute is set, the <meta> element provides user-defined metadata.*
24
Q

What is meant by opening and closing tag?

A
  • Its the element - <html> is the opening tag and </html> is the closing tag.
  • This is only applicable for elements that aren’t self containing.
25
Q

Where is the best section to include scripts in an HTML document?

A

T.L.D.R. put it inside the <head> tag with defer attribute, or even better make your script type=’module’.

<script src="demo_defer.js" defer></script>

When the browser loads HTML and comes across a <script>...</script> tag, it can’t continue building the DOM. It must execute the script right now. The same happens for external scripts <script src="..."></script>: the browser must wait for the script to download, execute the downloaded script, and only then can it process the rest of the page.

That leads to two important issues:

Scripts can’t see DOM elements below them, so they can’t add handlers etc.
If there’s a bulky script at the top of the page, it “blocks the page”. Users can’t see the page content till it downloads and runs.

  • If async is present: The script is downloaded in parallel to parsing the page, and executed as soon as it is available (before parsing completes)
  • If defer is present (and not async): The script is downloaded in parallel to parsing the page, and executed after the page has finished parsing, but before firing DOMContentLoaded.
  • If neither async or defer is present: The script is downloaded and executed immediately, blocking parsing until the script is completed
26
Q

What is the rel attribute in HTML and common values?

A

The rel attribute defines the relationship between a linked resource and the current document. Valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found.

Some common values:
* stylesheet
* icon

27
Q

What is a block level element and some examples?

A

HTML elements historically were categorized as either “block-level” elements or “inline-level” elements. Since this is a presentational characteristic it is nowadays specified by CSS in the Flow Layout.

A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a “block”.

Browsers typically display the block-level element with a newline both before and after the element. You can visualize them as a stack of boxes.
* div
* headers
* form
* hr
* footer
* h1-h6
* Lists and List Items
* Table

28
Q

How does a block level element differ from in-line element?

A

Content model
* Generally, block-level elements may contain inline elements and (sometimes) other block-level elements. Inherent in this structural distinction is the idea that block elements create “larger” structures than inline elements.

Block Level Default Formatting
* By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.
* In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.
* In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).
* The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In Line Default Formatting
* In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block.
* Horizontal margins, borders, and padding are respected between these boxes.
* The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned.
* The rectangular area that contains the boxes that form a line is called a line box.

29
Q

<em> vs <i> tag and <b> vs <strong>

A

<em>
is the “stress” tag. It tells the browser to emphasis items. <i> italisizes, but its mostly “styling.

Same as <b> vs <strong>

Its better practice to use <strong> and <em>

Not exactly. The <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it’s more important.

<em> vs <strong> - <em> is to change the emphasis of reading text. So its like saying “I loooove cake”

30
Q

What is the image tag and what important attributes should it include?

A 
<img src="" atl="my image">
  • alt is meant to give screenreaders a description.
  • Its a self closing tag.
31
Q

What types of images are supported?

A
  1. APNG (Animated Portable Network Graphics) — Good choice for lossless animation sequences (GIF is less performant)
  2. AVIF (AV1 Image File Format) — Good choice for both images and animated images due to high performance.
  3. GIF (Graphics Interchange Format) — Good choice for simple images and animations.
  4. JPEG (Joint Photographic Expert Group image) — Good choice for lossy compression of still images (currently the most popular).
  5. PNG (Portable Network Graphics) — Good choice for lossless compression of still images (slightly better quality than JPEG).
  6. SVG (Scalable Vector Graphics) — Vector image format. Use for images that must be drawn accurately at different sizes.
  7. WebP (Web Picture format) — Excellent choice for both images and animated images
32
Q

How to link a favicon?

A

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

33
Q

URI vs URL

A

URI: Uniform Resource Identifier (URI) is a string of characters used to identify a name or a resource on the Internet. Such identification enables interaction with representations of the resource over a network (typically the World Wide Web) using specific protocols.
* is a sequence of characters that distinguishes one resource from another.
* URI containing a scheme name, authority, path, query and fragment. A URI does not need to contain all these components. All it needs is a scheme name and a file path, which can be empty.

URL: In computing, a Uniform Resource Locator (URL) is a subset of the Uniform Resource Identifier (URI) that specifies where an identified resource is available and the mechanism for retrieving it.
* RL might contain ftp:// or https://. This tells you that the resource can be located and accessed via File Transfer Protocol (FTP) or Hypertext Transfer Protocol Secure (HTTPS).

You’ll notice that these look similar to the URI examples mentioned above. That’s because they contain many of the same components, including path and query.

However, a URL contains unique components, such as protocol and domain, as well. In the last URL example, “https://” is the protocol. “Offers” is the subdomain, and “hubspot.com” the domain name. “How-to-run-seo-audit” is the path, and the question mark and everything after makes up the query.

34
Q

What is the DOMContentLoaded event?

A

The DOMContentLoaded event fires when the HTML document has been completely parsed, and all deferred scripts (<script defer src="…"> and <script type="module">) have downloaded and executed. It doesn’t wait for other things like images, subframes, and async scripts to finish loading.

35
Q

What are the most important html page lifecycle events and why are they important? (not limited to these events)

A

The lifecycle of an HTML page has three important events:

DOMContentLoaded – the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures <img></img> and stylesheets may not yet have loaded.

Load – not only HTML is loaded, but also all the external resources: images, styles etc.

beforeunload/unload – the user is leaving the page.

Each event may be useful:

DOMContentLoaded event – DOM is ready, so the handler can lookup DOM nodes, initialize the interface.

load event – external resources are loaded, so styles are applied, image sizes are known etc.

beforeunload event – the user is leaving: we can check if the user saved the changes and ask them whether they really want to leave.

unload – the user almost left, but we still can initiate some operations, such as sending out statistics.

36
Q

What are the different elements used in a table

A
  • <table></table> - The parent element.
  • <thead></thead> - The header (items bold by default)
  • <tr><th></th></tr> - Rows and headers for the table. Instead of <td>
  • <tbody></tbody> - The main content.
  • <tr><td></td></tr> - The Rows and TableData.
  • <tfoot></tfoot> - Footer of the table.

The Table Header and Table Body aren’t necerily required, but including them allows you to style them directly

37
Q

Why would you still use a form element in HTML if you can build dynamic forms with custom js, html and css?

A
  1. Standard semantics are good e.g.: Chrome’s user/password/credentials autofill only works if the inputs are inside a form element that is submitted. It won’t save anything otherwise.
  2. Screen readers prefer form elements.
  3. The <form> element also allows you to define method and action attributes, which tell the browser what to do when the form is submitted. AJAX isn’t a 100% coverage tool, and as a web developer you should be practicing graceful degradation - forms should be able to be submitted, and data transferred, even when JS is turned off.

https://stackoverflow.com/questions/31066693/what-is-the-purpose-of-the-html-form-tag

38
Q

Review some best practices

A

https://www.freecodecamp.org/news/html-best-practices/

39
Q

Write and explain the main elements in an HTML form.

A 
<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">Email:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
		<li class="button">
        <button type="submit">Send your message</button>
</li>
  </ul>
</form>
  • The Form element is the parent element.
  • The action - Defines the location where the forms collected data should be sent when it is submitted.
  • The method - defines which HTTP method to send the data with (get or post).
40
Q

What is the benefit of having a for attribute on your label element?

A
  • It associates the label with the form control,
  • Enabling mouse, trackpad, and touch device users to click on the label to activate the corresponding control,
  • And it also provides an accessible name for screen readers to read out to their users.
41
Q

What is the most important attribute on the <input> element?

A

The type attribute. This attribute is extremely important because it defines the way the <input> element appears and behaves

For example having the type as email On the <input></input> element will change the input on a mobile device.

42
Q

What is different between an input and a textarea element?

A

The <input> tag is a void element, meaning that it doesn’t need a closing tag. <textarea> is not a void element, meaning it should be closed with the proper ending tag.

This has an impact on a specific feature of forms: the way you define the default value. To define the default value of an <input> element you have to use the value attribute like this:

 <input type="text" value="by default this element is filled with this text" />
<textarea>
by default this element is filled with this text
</textarea>
43
Q

What is the attribute on a button that changes its function and what values can it have?

A
  • type
  • Submit - Sends the forms data tot he forms action attribute.
  • Reset - Resets all the form values to default.
  • Button - does nothing. Needs to be customized with JS.
44
Q

Why is the name attribute on HTML form elements important?

A

The names are important on both the client- and server-side; they tell the browser which name to give each piece of data.

The name attribute is used when sending data in a form submission. Different controls respond differently. For example, you may have several radio buttons with different id attributes, but the same name. When submitted, there is just the one value in the response - the radio button you selected.

      <input type="text" id="name" name="user_name" />
45
Q

What can you do with client side form validation?

A

You can validate a lot of form data withhout javascript.

  • Required fields - required
  • Minimum and maximum length - minlength and maxlength
  • Number/email or some other type - type
  • Pattern /some regex - pattern

You can then add CSS to validate/stype the form. with the input:invalid and input:valid or input:required css styles

46
Q

What are some basic attributes for the <input> element.

A
  1. readonly - user cant modify data but it can be submitted.
  2. disabled - input cant be modified and is not submitted. (similar to checkboxes not checked)
  3. placeholder - text that appears inside a text input box.
  4. size - physical size of the box
  5. maxlength - number of characters
  6. spellcheck - can add spellcheck if the browser supports it.
47
Q

What are different input types and their behaviour?

A

email
* Needs to be a valid email address.
* The browser will validate it.
* multiple allows multiple email addresses.
* a@b is valid. You need to use pattern to be more specific.

search
* Main difference with text input type is styling. Browsers add an X.

tel
* Enables a touch screen with numbers
* Does not enforce any constrains on values entered by a user.

url
* Needs a protocal like http.
* Dynamic keyboard.

number
* Dynamic keyboard.
* can have min and max

range
* Creates a slider

date and type
* type = week / month / datetime-local / time
* can have constraints as well

48
Q

What are boolean html attributes?

A
  • Attributes without values.
  • Their presence means “true”
    <input type="checkbox" checked />
    input type="checkbox" />
49
Q

What is HTML5?

A
  • The term HTML5 is essentially a buzzword that refers to a set of modern web technologies. This includes the HTML Living Standard, along with JavaScript APIs to enhance storage, multimedia, and hardware access.
  • You may sometimes hear about “new HTML5 elements”, or find HTML5 described as a new version of HTML. HTML5 was the successor to previous HTML versions and introduced new elements and capabilities to the language on top of the previous version, HTML 4.01, as well as improving or removing some existing functionality. However, as a Living Standard HTML now has no version. The up-to-date specification can be found at html.spec.whatwg.org/.
  • Any modern site should use the HTML doctype — this will ensure that you are using the latest version of HTML.
  • Note: Until 2019, the W3C published a competing HTML5 standard with version numbers. Since 28 May 2019, the WHATWG Living Standard was announced by the W3C as the sole version of HTML.
  • HTML5 introduced many new features that made it a superior alternative to HTML. Some of the new features include:
  • New semantic elements like <header>, <footer>, and <section>1
  • Audio and video tags which enable web developers to include a video or audio file on their pages
  • Input tag kinds have been expanded
  • Figure and figcaption
  • Placeholders
  • Preload Videos
  • Controlling the display
  • Regular Expressions Adaptability
  • Elements that appear inline
  • Support for Dynamic Pages
  • Email as a property
  • Cryptographic Nonces
  • Reverse Links
  • Images with a width of zero
  • Canvas in HTML5
50
Q

Can you build a form inside another form?

A

It’s strictly forbidden to nest a form inside another form. Nesting can cause forms to behave unpredictably, so it is a bad idea.

51
Q

What are two common grouping elements in a form and explain their differences/requirements.

A
  • <fieldset></fieldset> and <legend></legend>
  • <fieldset> - creates grouping with same style/semantic purpose.
  • <legend> is then used to label the fieldset in which its included.
  • Some screen readers use the fieldset before each input in a section.
  • The use case in this example is one of the most important. Each time you have a set of radio buttons, you should nest them inside a <fieldset> element.
  • There are other use cases, and in general the <fieldset> element can also be used to section a form.
  • Ideally, long forms should be spread across multiple pages, but if a form is getting long and must be on a single page, putting the different related sections inside different fieldsets improves usability.
  • Because of its influence over assistive technology, the <fieldset> element is one of the key elements for building accessible forms; however, it is your responsibility not to abuse it. If possible, each time you build a form, try to listen to how a screen reader interprets it. If it sounds odd, try to improve the form structure.
52
Q

How would you assiciate a label with another element (write the example)?

A

On the for and id tags of the two elements.
<label for="name">Name:</label> <input type="text" id="name" name="user_name" />
Or by nesting the control.

53
Q

What is the <span> tag used for and how does it differ from <div>?

A
  • The HTML span element is a generic inline container for inline elements and content. It is used to group elements for styling purposes (by using the class or id attributes), A better way to use it when no other semantic element is available.
  • It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element.
  • So its more like something you would use in a paragraph.
54
Q

Why are CSS layouts preferred over table layouts?

A
  • Screenreaders dont function well with table layouts. Tables are meant to be tables….
  • Tables require more structural code vs divs. - “Tag Soup” harder to maintain.
  • css layout is more flexible and allow multi column layouts.
  • Responsive design is easier with css tables. Tables are not automatically responsive: When you use proper layout containers (such as <header>, <section>, <article>, or <div>), their width defaults to 100% of their parent element. Tables on the other hand are sized according to their content by default
55
Q

Best practice for <input type="submit> vs <Button type="submit">

A
  1. The button element default behavior is to submit, whereas the input element with a type of button has no default behavior
  2. Both <button> and <input></input> display as buttons and cause the form data to be submitted to the server.</button>
  3. While the button-text of an <input></input> can be specified, you cannot add markup to the text or insert a picture2. On the other hand, <button> can have content, whereas <input></input> cannot (it is a null element)</button>
  4. It is recommended to use <button> because it has better semantics, better ARIA support and it is easier to style.</button>
56
Q

What happens when a html form is submitted and can you name a reason why you might want to use ajax or something similar?

A

At its most basic, the web uses a client/server architecture that can be summarized as follows:

  • a client (usually a web browser) sends a request to a server (most of the time a web server like Apache, Nginx, IIS, Tomcat, etc.), using the HTTP protocol.
  • The server answers the request using the same protocol.
  • An HTML form on a web page is nothing more than a convenient user-friendly way to configure an HTTP request to send data to a server. This enables the user to provide information to be delivered in the HTTP request.
  • The <form> element defines how the data will be sent. All of its attributes are designed to let you configure the request to be sent when a user hits a submit button. The two most important attributes are action and method.
  • The action attribute defines where the data gets sent. Its value must be a valid relative or absolute URL. If this attribute isn’t provided, the data will be sent to the URL of the page containing the form — the current page.
  • The names and values of the non-file form controls are sent to the server as name=value pairs joined with ampersands.
  • The action value should be a file on the server that can handle the incoming data, including ensuring server-side validation.
  • The server then responds, generally handling the data and loading the URL defined by the action attribute, causing a new page load (or a refresh of the existing page, if the action points to the same page).
  • The method attribute defines how data is sent.
  • The HTTP protocol provides several ways to perform a request; HTML form data can be transmitted via a number of different methods, the most common being the GET method and the POST method.

Why use something additional like Ajax?
* Javascript has additional validation options.
* You can do an async post without having to refresh the page.
* You have more flexibility in terms of data formatting.

Programming (15 decks)

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