How to use Pattern Attribute in Html5

Html5-01r-1920x1080

 

Pattern Attribute:

 

Pattern attribute is used for input field validation and used  to provide  a regular expression which is used to match  the input fields value whether the value is according to the pattern specified or not.

When user  enter a value in the input field and if the value entered is  not as per the  expected format, then a error is thrown and our form will not submit until user does not provide correct format value.

Read more about How to use Pattern Attribute in Html5 visit Findnerd.

Advertisements
How to use Pattern Attribute in Html5

An Overview to HTML5

 

5865032805_84d3b0d7a9_b

What is HTML5?

  • It is a Hyper Text Markup Language which is used for structuring and presenting content on Internet.
  • It is the current version for HTML.
  • Its previous version was HTML 4.01.
  • It is the 5’th version of the HTML standard.
  • It’s main aim to improve the language that supports latest multimedia and easily accessible for the developers.

 Some rules for HTML5:-

  1. All the new features introduced should be based on HTML, CSS , DOM , and JavaScript.
  2. It reduces the need for the additional plugins.
  3. It has better error handling technique.
  4. It is device independent.
  5. It has more markup for replacing the scripting.

Read more about An Overview to HTML5 visit Findnerd.

An Overview to HTML5

How to make custom attribute in Html5 ?

Hi all,

You can make your own custom attribute using data-. It allows possessive exchanged information between HTML and its DOM representation. It can work with javascript also, every browser will let you fetch and modify data attributes using the getAttribute and setAttribute methods,

Example with css –

css :-

section [data-index='123'] {
color:red;
width:200px;
}

How to make custom attribute in Html5 ?

-For full set of codes /steps, visit the complete Blog: How to make custom attribute in Html5 ?

FindNerd is the right place to resolve HTML problems. Here you can post Html Help Forum.

Apart from this,  If you have any PHP language query, you can post at PHP questions and answers and get instantly resolved it from highly experienced FindNerd community members.

How to make custom attribute in Html5 ?

How to Upload Two Separate Files in PHP

Hi, if you want to upload two separate files from one single form to be uploaded and with a for simplest code Look at mine code. The form will have two separate input files but you need to name them common, ex ‘files[]’ I’m using ‘upload[]’ in this case.

For complete information, Visit full Blog: How to Upload Two Separate Files in PHP

How to Upload Two Separate Files in PHP

FindNerd community is a right place where you can post and look for PHP Questions and Answers .

If you need more Blogs related to PHP language then visit to our PHP Blogs.

How to Upload Two Separate Files in PHP

HTML5 Responsive Design – ViewPort Meta Tag (Part 3)

Hello Friends,

In this article, we’re going to focus on another important concept of responsive design, i.e. the ‘Viewport Meta Tag’.

View-Port Overview

The viewport meta tag was introduced by Apple to help web developers improve the way web pages are displayed on the iPhone but obviously now it’s used for all mobile devices. This basically tells a mobile device, that the current page is optimized for mobile and it should display it in a certain way and not in the default web layout. In simple words: “A meta viewport tag provides the instructions to the browser on how to manage the page’s dimensions and scaling.” The zooming in and out of the page that you can do is because of this whole viewport business only. Let’s look at how we use the meta tag:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

In the above example, this meta tag instructs the mobile device to not zoom. This allows the responsive design for mobile devices to be loaded in the scripts.

Virtual Viewport can be split into two:

Visual Viewport: The part of the page which is currently shown on the screen.

Layout Viewport: Visual Viewport + The part of the page which currently lies outside the display area. This is basically the mobile equivalent of desktop resolution. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px as the default.

In the above examples, we saw only two properties of the viewport meta tag: width and initial-scale; but there are others which are listed in the following table:

Property

Description
width The width of the virtual viewport of the device.
device-width The physical width of the device’s screen.
height The height of the “virtual viewport” of the device.
device-height The physical height of the device’s screen.
initial-scale The initial zoom when visiting the page. 1.0 does not zoom.
minimum-scale The minimum amount the visitor can zoom on the page. 1.0 does not zoom.
maximum-scale The maximum amount the visitor can zoom on the page. 1.0 does not zoom.
user-scalable Allows the device to zoom in and out. Values are yes or no.

Above mentioned properties of the viewport would be added in the ‘Head’ section of our website. Below are some examples which show how we can implement these viewport elements:

  • In case your mobile design is set at 320px, we can specify the viewport width:

<meta name=”viewport” content=”width=320″>

  • For fluid layouts, we need to match our layout width to the device width:

<meta name=”viewport” content=”width=device-width”>

  • To take the advantage of the entire landscape mode and to manage full screen mode of device browser, we add the attribute ‘initial-scale=1’, which command the device browsers to form a 1:1 relationship between “CSS Pixels” and the “Device Independent Pixels (DIPs)” irrespective of device orientation:

<meta name=”viewport” content=”initial-scale=1″>

  • Arrange an accessible viewport: In addition to set the initial-scale, we can also control the following attributes on the viewport:
    • minimum-scale

    • maximum-scale

    • user-scalable

    These attributes are essential to restrict the user’s ability to zoom the viewport, potentially creating content render issues.

  • Combining Viewport Values: The viewport meta tag can add individual values as well as multiple values, allowing multiple viewport properties to be set at once.

    ** Whenever we need to add or combine multiple viewport attributes in a single set, we have to use “Comma(,)” after the attribute. E.g.:

    <meta name=”viewport”content=”width=device-width, initial-scale=1, maximum-scale=1″>

CSS Viewport Rule:

“This specification provides a way for an author to specify, in CSS, the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.”

– w3.org

Basically, this rule allows one to attain the functionality of the viewport meta tag by way of CSS @viewport keyword without cluttering up their HTML. This method helps to keep the style separately for content and provide a more semantic approach. Like viewport meta tag was introduced by Apple, this approach was first proposed by Microsoft in the light of IE10 explorer ignoring viewport meta tag in some situations.

Examples

@viewport {

width: device-width;

zoom: 1;

}

@-ms-viewport{

width: extend-to-zoom;

zoom: 1.0;

}

End of this Session

In my last two blogs, I talked about the ‘Media Queries’ for responsive design. These are follows –

In this session, I have tried to cover as many aspects of ‘ViewPort’ as to give the reader a good enough understanding of its role in responsive design. However, the field of responsive design in itself is quite broad, so I’ll be coming up with some new related topics in my next articles. Hope you’re finding these sessions enjoyable and informative. Thanks!

For more Information, Visit : HTML5 Responsive Design

HTML5 Responsive Design – ViewPort Meta Tag (Part 3)