How to create a login form using PHP MySQL
How to create a login form using PHP MySQL

How to create a login form using PHP MySQL

Hello Friends how are you doing? Hope you doing well. Today I have brought you an interesting topics. As the theory subjects we need to learn practical things also. Software coding or learning about programming languages are the practical we have in software engineering. Yet most of students struggle in software development. Not everyone good in software development. That’s not because of you are weakness It could may be because you didn’t catch the content well. Today we are going to learn how to create a login form using PHP MySQL.

So today I am going to discuss with you how to create a login form in PHP and MySQL. Everybody like login form design. It is very simple. Login form is a mandatory part in a system. Every software system you create you can see a login form there. This is a guide most of students need. So without wasting time we will start the learning. Firstly we will see the login form bootstrap code. Then we will move to validation part. Here we will use the bootstrap form.

Already you know today we are going to create a login form. I will explain you every word in the code to you. Coding is not just copy paste the content. It is about understanding the keywords. Once you understand the meaning you can create whatever you like. The login form design what we are going to create today is based on following technologies. Login form bootstrap, login form html and SQL. Before start the coding I would like to explain few questions. Which is the answers for most student’s questions.

Can bootstrap used offline?

Yes. You can use bootstrap offline. For that you have to download the bootstrap. Then in your file include the file path. After that you can use bootstrap offline. Bootstrap you can use online also. For that what you have to do is copy the CDN file and paste it in the PHP file. Both CDN and file path you have to include inside the header.

Can bootstrap used with PHP?

Yes of course you can use. You can use bootstrap with PHP. There are no any restrictions. You can include bootstrap codes inside PHP files. All you have to do is include the CDN or file path in the header tag. Now let’s move to the code.

How to create login form using HTML Bootstrap

HTML code for the login page

<div class="border2">
<div align="center" class="imagemargin">
<i class="fas fa-user-circle fa-6x" style="color: gray;"></i>
</div>
<div class="formmargin">
<form>
<div class="form-group">
<label for="userName">User Name</label>
<input type="text" class="form-control" id="userName" name="userName" placeholder="Enter your user name">
</div><div class="form-group">
<label for="userPass">Password</label>
<input type="password" class="form-control" id="userPassword" name="userPassword" placeholder="Enter your password">
</div>
<div class="pt-3"></div>
<button type="button" class="btn btn-primary btn-block" id="btnUserLogin">Login</button>
</form>
</div>
</div>

This is the bootstrap code for form. Now we have created a login form with using HTML. Then after that we will see the jQuery code. Because now we have to validate the login form. Validate means we have to check the insert texts are correct or not. Then we can learn the SQL codes. Before learning those stuff firstly we will look at the meaning of above login form bootstrap code meaning.

Components of the login page 

parts of a login page
parts of a login page

HTML Form tag – We use form tag to create the forms. We type text fields inside the form tag. Form tag is a HTML tag.

HTML div tag – div tag is a HTML tag. HTML div tag creates a division. It is act likes a block. Like a rapping. For the inside tag it holds it.

HTML label –  HTML label is for the label. It shows the name of the input tag. For inserting data all the text boxes has a name. What user should enter. That name we call as label. Inside HTML label tag we can type the name.

HTML Input tag – HTML input tag we used to catch the input from user. When you are designing a HTML or bootstrap form you can use this to get inputs. Inputs like email address, contact number, name, age anything we can take by using this.

HTML id attribute – We use id to identify the tag. Because when we want to do the jQuery validation for the login form we need this. We need to retrieve user input value. To get those value we have to call to the id and get it. When put id please always put meaningful words. Which you can understand.

Bootstrap placeholder – We use placeholder inside text field. It gives a idea to the user what kind of data should insert. Even though text fields has labels users get confused what type of thing need to be enter. That conflict we can omit from this. We always put example for the corresponding text field as a placeholder. If I give you an example. When you are asked to enter email you can show example@gmail.com as the placeholder. These things prevent users inserting invalid data. These are ensures UI reliabilities.

HTML button – HTML button we used to include buttons to the user interface. We need a button to send login details to the backend. For that we can use a button. Here we have use a normal button because we are using jQuery to the data passing.

Bootstrap button class – We use bootstrap to ease our UI works and give good UI to the users. Bootstrap has several button classes. Here we used few classes. Btn represent it is a button. TO create a button using bootstrap we have to say it is a button. We are doing that using btn class. We have different colors of buttons in bootstrap. In login forms it does a data inserting, passing function. Therefore we can use a blue or green color button. We can mention the color from adding color names to the end of btn class.

Btn-primary implies it is blue color button. If you want to create a green color button you can type btn-success.

When we see the input tag it has different types. When we get a text item from user we can use type as text in the input tag. For the password field we can use the type as password. It will prevent showing what user is typing. If you use text as the type for the password field. Then it will show the password at the time user is typing the password.

Conlusion

Hope you have understand what are the things in the HTML bootstrap form. What are the meaning of the tags. Why we are using them. jQuery validation and the data passing to the backend in the login form we would discussed from another post. Please check this post. How to validate login form and database connectivity.  I am going to conclude how to create a login form using PHP MySQL post from here. The SQL validation also check this. If you have doubts please comment us and let us know. Then we will meet again with another interesting topic. Till then goodbye to all.

Audy Ranathunga

Audy Ranathunga, Author of myexamnote is our most experienced author. She has been working as a blog post writer for 4 years. She joined with myexamnote before 1 year ago and she has contribute lots of valuable posts for readers.

Leave a Reply