Form & Grid

A combination of ours Form & Grid

Introduction

Forms & Grid are elements to facilitate the disassembly of parts of applications. stolen in a combination of HTML and CSS.

You can use our elements in a very simple way. These are some examples. You can see more examples on the our "Sensation Framework FrontEnd". It is located at the following address:

Sensation Framework - FrontEnd

Note how to use Form & Grid:

  • Unzip the zip file and open in editor as folder and copy the code you need and paset in your applications
  • Copy code form this tutorial and paset in your applications
  • CSS for Form & Grid you can copy and paste and header

Sensation Energy CSS


<link rel="stylesheet" href="http://www.sensationenergy.com/se_css/se_css.css">
<link rel="stylesheet" href="http://www.sensationenergy.com/se_css/se_css.css_1">

Example where the link with the CSS address should be


<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title website</title>
<link rel="shortcut icon" href="http://www.your_webiste.com/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.sensationenergy.com/se_css/se_css.css">
<link rel="stylesheet" href="http://www.sensationenergy.com/se_css/se_css.css_1">
</head>
<body>

Clasic inputs 1

Classic form for names, email, passwords, .. It consists of one field which is the type of text, password or email. In the example we see that it is located only on the left side.

Example for input name, password and email


<div class="form-group">
<label><h3>Name</h3></label>
<input type="text" name="#"  class="form-input" />
</div>
<div class="form-group">
<label><h3>Password:</h3></label>
<input type="password" name="#" class="form-input" />
</div>
<div class="form-group">
<label><h3>Email:</h3></label>
<input type="email" name="#" class="form-input" />
</div>

Clasic inputs 2

Classic form for text. It consists of one field which is the type of text. In the example we see that it is full screen.

Example for input title

We've added a placeholder here and it's your Title


<div class="form-group">
<label ><h3>Title</h3></label>
<input type="text" name="#" placeholder="Title"  class="form-input" />
</div>

Mluti inputs 1

Mluti inputs are elements for entering only numbers, checkbox and Radio buttons. It consists of 3 elements:

Input only numbers

You enter only numbers and the entry type is a number


<div class="form-group">
<label for="thread_title"><h3>Number</h3></label>
<input type="number" name="#" id="numberField" class="form-input" />
</div>

Checkbox

This is a checkbox where it is indicated whether the valuers are checked or not


<div class="form-group">
<label for="thread_title"><h3>True</h3></label>
<input type="checkbox" name="#" class="form-input" />
</div>
<div class="form-group">
<label for="thread_title"><h3>False</h3></label>
<input type="checkbox" name="#" class="form-input" />
</div>

Radio button

This is a radio button where he user chooses which button to mark


<span class="radio-item">
<label ><h3>True</h3></label>
<input type="radio"  name="#" class="true" value="" checked="checked">
</span>
<span class="radio-item">
<label ><h3>False</h3></label>
<input type="radio"  name="#" class="false" >
</span>
</div>

Mluti inputs 2

Mluti inputs are elements for entering only time and date, value and textarea-input It consists of 2 elements:

Input time and date

Here we can enter only the time and date, the type of the first entry is time, and the second only date


<div class="form-group">
<label for="cat"><h3>Time</h3></label>
<input id="cat" type="time" class="form-input" name="cat_naslov">
</div>
<div class="form-group">
<label for="cat"><h3>Date</h3></label>
<input id="cat" type="date" class="form-input" name="cat_naslov">
</div>
</div>

Input value and textarea

Input value is used in edit code php. This means that when you want to edit for example name, you already have a name user from the database, which is written in values, and then you can change the value. Tektarea is used to enter more tek. It is a multi-layered text. It is used, for example, in blog content.


<div class="form-group">
<label><h3>Value</h3></label>
<input type="text" name="#" class="form-input" value="Value">
</div>
<div class="form-group">
<label><h3>Textarea</h3></label>
<textarea rows="3" name="#" class="form-input"></textarea>
</div>

Upload image or file

This is a simple element used to enter a file or image. Just click on Browses and insert what you want

Upload image


<div class="form-group">
<label for="image"><h3>Image</h3></label>
<input type="file" name="#" class="form-input">
</div>

Readonly and require fields

Readonly and require fields are used in forms where essential inputs are required. Readonly indicates that the element is read-only and cannot be written, and require indicates that this field is required and must be filled out. For example, when you have a value in the field, for example, usernem that cannot be changed, put eadonly. When something needs to be filled in, for example username and password, you set that these fields are required and must be filled in, otherwise they will not be able to be processed further

Readonly

Readonly means that it is read-only and nothing else can be entered and he has type text


<div class="form-group">
<label><h3>Readonly</h3></label>
<input type="text" readonly="readonly" placeholder="Readonly" name="#" class="form-input">
</div>

Require date

Require date indicates that only the date can be entered and that it is a required field. Form itself will not allow you to go further until you fill in this field he has type date

  
<div class="form-group">
<label><h3>Require Date</h3></label>
<input type="date" placeholder="Require date" name="#" class="form-input" require>
</div>

Require text

Require text indicates that only the text can be entered and that it is a required field. Too form itself will not allow you to go further until you fill in this field he has type text

  
<div class="form-group">
<label><h3>Require Text</h3></label>
<input type="text" placeholder="Require" name="#" class="form-input" require>
</div>

Selects

Select serves to select some elements that are either written in html or retrieved from the database using php. We have given two examples that are written in HTML

Clasic select 1

Simple selct with where you can choose 'yess' or 'no' 

  
<div class="form-group">
<label for="select"><h3>Select 1</h3></label>
<select  name="#" id="select" class="form-input">
<option value='yes'><h3>Yes</h3></option>;
<option value='no'><h3>No</h3></option>;
</select>
</div>

Clasic select 2

Simple selct with "list" and "datalist". Also here where you can choose 'Select a' or 'Select B' or 'Select C' 

  
<div class="form-group">
<label><h3>Select 2</h3></label>
<input list="se" class="form-input" placeholder="Select A" name="#">
<datalist id="se" class="form-input">
<option value="Select B">
<option value="Select C">
</datalist>
</div>

Button

Buttons are essential for every form. They also have great functionality. We can use them in edit, insert, delete, .. In some situations, there is no rainbow or isert with the rainbow type, which is later important because of the IF loop. These are our examples of our buttons.

Pblish, Submit, Edit and Cancel buttons


<input type="submit" class="btn-2" value="Publish">
  
  
  
<button class="btn-2">Submit</button>
  
  
  
<input type="submit" class="btn-2"  value="Edit">
  
  
  
<button class="btn-2">Cancel</button>

Documentation



Answer the following question:

You must be logged in



WE USE COOKIES Introduction. BeSafe works to protect your privacy when you use our services.

More Info