Form : Coming Fast..

-
Form is one of the significant method for data collection. If you want to make forms for any society or for some other work, then you are at right place. 
In this blog post we will learn to make a simple but useful form. 
First of all: Open any text editor like notepad, then save the file as "form.html".....
Now start coding..
Write the below mentioned code into the form.html file using a test editor.

Code: (HTML)

<!DOCTYPE html>
<html>
 <head>
  <title>Form</title>
  <link rel="stylesheet" href="style.css" type="text/css" >
 </head>

<body>

 
 <div id="container">
  <h1>Fill In The Form..</h1>
 <div id="formBody">
  <form>
   Name:&nbsp;<input type="text" placeholder="enter your name.."><br><br>
   Class:&nbsp;&nbsp;<input type="text" placeholder="enter your class e.g. BESE-7"><br><br>
   Batch:&nbsp;<input type="number" placeholder="e.g. 2016"><br><br>
   CMS ID:&nbsp;<input type="number" placeholder="e.g. 184055."><br><br>
   School:&nbsp;<input type="text" placeholder="e.g. SEECS"><br><br>
   Date Of Birth:&nbsp;<input type="date"><br><br>
   <input type="submit" >
   

  
                     </form>
 </div>
 <div id="formFooter">
  &copy; form2018htmlwebEngineering
 </div>
 
 </div>
 

</body>

</html>


Now open another text editor file, save it as "style.css".


 


You might have observed   <link rel="stylesheet" href="style.css" type="text/css" >






in the html file, actually it is a link to "style.css". 






Style.css is a cascading style sheet and is used to add


 


styling to your simple web page.










Write the below mentioned code in "style.css". Don't forget to 






Save it.






CODE: (CSS)








body{
 background-image: url("https://cdn.pixabay.com/photo/2016/10/17/14/31/background-1747784_960_720.jpg");


}
h1{
 padding-left: 15%;
 background: linear-gradient(to right, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 0%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 64%,rgba(56,56,56,1) 87%,rgba(78,78,78,1) 100%,rgba(27,27,27,1) 100%);
 color: white;
 width: 50%:
}

#container{

 font-family: helvica;
 font-size: 20px;
 font-weight: Bold;
 width: 50%;
 margin-left: 25%;
 background: linear-gradient(to bottom, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%);
 
}
input{
 
 width: 100%;
}

#formBody{
 
 
 background: linear-gradient(to bottom, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%);
 margin: 20px;
 align-content: center;
 padding: 20px;
}

#formFooter{
 text-align:left
 font-size: 10px;
 background: black;
 color: white;
 

}






OUTPUT:





















































Comments











Post a Comment



















Popular posts from this blog









Project Ideas For Software Engineering Students






-














Image







        The project is the most important thing to do in my university at the end of the semester, but you need to think about the ideas before time, here I am going to tell you some of the projects (subject wise) that you can take in your respective semester to add value in your grades and knowledge, so let's begin...      Fundamentals of Programming     Game using python e.g. flaming bird game, ping ball, tic tac toe, snake game etc.  Page rank  Photo Gallery      Object Oriented Programming     Android application using Android Studio e.g calculator, Vocabulary app etc.  File management System      Database Systems     Web portal using mySql, html, css, php and JavaScript   Database for on-line market  University Database        Software Engineering     Car Rental System  Web portal, website   Biometric System for vote casting, attendance etc.      Data Structures and Algorithm     Work on Search button   Page rank  Search using Dictionary, hash tables etc.  Translatio...








Read more










Pintos : Series : Part3 : Project 1 : Alarm Clock






-














Image







          The PintOS project has  27 test cases  that we need to pass. In the first project we are just going for the five test cases related to alarm clock that are as under:   alarm_multiple  alarm_single  alarm_simultaneous  alarm_negative  alarm_zero    But before jumping into the code, let's first understand the basic structure of PintOS and how it runs. Consider the following diagram:       Here QEMU is an emulator on which pintOS runs. Test cases are the processes that we run on the PintOS (Operating System). So we only need to modify the PintOS code, we are not allowed to make any change to the test cases code as this would be a cheating.   When you open up the PintOS directory, in tests/threads/tests.c  all the test cases are declared. And in the tests/threads/  directory you can observe files with the extension " .ck " and " .c ". So the " test_Name.c " files are the files in which test cases are defined, while " test_Name.ck " file...








Read more










A Survey of the Final Year University Students






-














Image







    I don't know what should be the title of this blog post, but let's call it " A survey of the final year university students ". Pretty long title, huh?      Okay, let me tell you about this survey...    The story behind this thing:    Well, one day I thought about writing a post on Facebook to ask people about their sentiments and reviews regarding the final year of university life, then another thought knocked my head to write a full blog post on this topic. Then I disseminated a google form for this purpose. The google form was saying:    "Hello, final semester people!   I thought to collect reviews of 2020 graduates specifically of NUST and other IT universities. I am planning to add these to my blog post. Please take a few seconds to fill this form, thank you."    So that was a brief story behind this whole thing,   Now let's have a look at the most awaited questions and the corresponding responses...      Question#1:  Do you feel like a better hu...








Read more










Software Engineering Past Papers






-














Image







       When we were in school we used to have surplus amount of  past papers, and we used to practice them in order to get prepared for the exam day.   But now in university or college ( till bachelors ), we don't have overabundance of or even sufficient past papers. We tried to get them from our seniors or from the teachers. Teachers mostly do not provide any past paper for practicing and senior students usually don't have them, so from where we can get these papers? How can we practice?   If you are the one who is in desperate need of past papers regarding Software Engineering courses then here you go.....   GTUInfo  provides them for free, it provides the semester wise and subject wise past exam papers.    so what are you waiting for? click this link  and grab the past papers for practicing more and more for improving your grades.      








Read more










Data Engineering Tools 






-














Image







   Data is a new oil. To channelize this data we need proper pipelines. These pipelines are mostly called ETL or data pipelines.  There are various tools out there to work out these Extract, Transform, and Load (ETL) operations.  Some of the scripting tools are:  - Python - SQL and NoSQL Apache provides a wide range of products that can be used as Data Engineering tools.  Some of the amazing apache DE services comprised of; - Hadoop - Spark - Kafka - Cassandra - Hive In addition, some cool DE tools are: - Tableau - Talend - MapReduce These DE tools provide a way to manage the data pipelines in a more effective, efficient, and better way.  Almost every Data-Oriented company in the corporate sector is highly dependent upon these technologies. They are leveraging many of the above-mentioned mechanisms for promising Data Services and Architecture. That's it for today. Hope you have enjoyed this article. If you want to know more about data or software relat...








Read more










NoSQL database






-














Image







   Data is everywhere, it is expanding with each passing day. Relational Database systems are kind of fixed and static. When we have something in abundance and without any standard formation, then the tables of relational database systems cry out.  So what to do with so many data integrations from several structured as well as unstructured sources. Well, the answer is to go for NoSQL (Not Only SQL). SQL is a structured query language that is used to query Relational Databases. However, NoSQL database does not contain data in the form of relations. Most of the NoSQL databases follow the JSON type structure to store data.    Formal Definition:      Guru99  provides a pretty nice definition for NoSQL databases: " NoSQL Database  is a non-relational Data Management System, that does not require a fixed schema. It avoids joins and is easy to scale. The major purpose of using a NoSQL database is for distributed data stores with humongous data stora...








Read more










5+ useful mobile applications for freshmen 






-














Image







     Make your mobile phones useful! But how?    Here's how...   In this blog post, we will have a look at 5+ useful mobile applications. These applications are generally useful for everyone, but freshmen could better use them as they have got plenty of free time, so let's get started...   5+ Mobile Applications   1. Medium   This application could be used to read plenty of articles related to a plethora of different topics. Really cool application.   2. Facebook   Whaaaaaaaaaat, are you serious?    Wait, wait! Facebook could be useful. Let me explain it to you. Go to Facebook and in the search bar type the name of your subjects, for example, Artificial Intelligence, you will get the groups and pages related to Artificial Intelligence, you may like these pages and you may join the group. After that in your Facebook feed, you will get the updates regarding Artificial Intelligence. In this way, you will remain update regarding your domain. Got it!   3. Sololearn   This applicati...








Read more










Github : Part 1 : Introduction






-














Image







   Have you ever gone through the problem of version control while working on some coding project in a group? Did you find it difficult to share code with each member of a group? Yes? Then this blog post is for you...     Problem..   Back in days, people used to write code but they found it difficult  to share and control the progress of their code in contact with each other. Say You are in Pakistan while your friend is in New York and both of you are working on some project involving coding and programming. With time to time you need to send some portion of your code to your friend to test it for further progress. After completion of your project you need to send the whole source code to your supervisor living in India. You are using email and Google drive for sending source codes, but this is not feasible but tedious as your friend need to download it then by modifying it on his own computer, send it back to you. This wastes a lot of time and is prone to errors.      Solutio...








Read more










Simple Web Page : Step by Step






-














Image







   Today I will tell you, how can you create a simple web page using HTML and CSS, step by step.  so let's begin..     Make a folder on desktop (for easy access) naming MyFirstWeb .  Open any text editor like Notepad  etc.  Type simple HTML structure  in the text editor as:     <!DOCTYPE html>     <html>           <head>                       <title>                      </title>           </head>                             <body>                               </body>     </html>          Now save this file in the MyFirstWeb  folder by naming it as : index.html  You can see the file Icon as of your browser.  Click this file to open it in the browser.  Edit the above code a...








Read more










Relational Data Model






-














Image







In the previous blog post, we covered Data Modeling. We have seen that data modeling is really important before jumping into predictive modeling.  In this article, we will cover the Relational Data Model (RDM). Let's start from the very basics, relational means anything which is linked with some other thing. This link is called "Relationship". In RDM or RM there are major three types of relationship cardinalities (also called Multiplicities or Cardianalities): 1. One to one 2. One to many 3. Many to many We can understand these with the help of a few simple examples;  One to one: One department has one manager. One to many: One class has many students. Many to many: Many teachers can teach many students. Okay, so we have got an abstract overview of the term " Relational ", now the next thing is " Data ", data covers everything, anything... And finally, " Model " means something in the form of a template, design, a kind of blueprint.  To store...








Read more