1636632379
Как создать формы регистрации и входа с помощью HTML и CSS
В этой статье вы узнаете, как создавать формы регистрации и входа с помощью HTML и CSS. Я поделился другим фрагментом кода, основанным на том, как создать простую форму входа. В этом руководстве я создал форму регистрации и входа с помощью HTML и CSS. Если вам понравилась эта статья, подпишитесь на мой канал YouTube - Code Info
HTML-формы необходимы для сбора различных типов пользовательских данных, таких как контактная информация, такая как имя, адрес электронной почты, номер телефона, данные кредитной карты и т. Д.
HTML-форма создается с помощью тега <form> </form>, и в этом теге у вас будут все элементы ввода для получения пользовательского ввода. Веб-форма или HTML-форма очень гибкие и могут иметь множество полей ввода разных типов, таких как текстовые поля, сохраненные пароли, переключатели, поля со списком и т. Д.
Формы содержат уникальные элементы, называемые элементами управления, такие как поля ввода, флажки, переключатели, кнопки отправки и т. Д. Клиенты часто заполняют форму, улучшая ее элементы управления, например: вводят текстовое содержимое, выбирают виджеты и т. Д. И отправляют эту форму в веб-сервер для дальнейшей обработки.
Исходный код:
Если вам нравится этот дизайн формы входа, не стесняйтесь использовать его в своем проекте. Скопируйте код, нажав кнопку «Копировать» ниже.
Сначала вам нужно создать два файла. Один из них - HTML, а другой - CSS. После создания файла вставьте приведенный ниже код.
КОД HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sign Up | By Code Info</title>
<link rel="stylesheet" href="Css/style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="signup-box">
<h1>Sign Up</h1>
<h4>It's free and only takes a minute</h4>
<form>
<label>First Name</label>
<input type="text" placeholder="" />
<label>Last Name</label>
<input type="text" placeholder="" />
<label>Email</label>
<input type="email" placeholder="" />
<label>Password</label>
<input type="password" placeholder="" />
<label>Confirm Password</label>
<input type="password" placeholder="" />
<input type="button" value="Submit" />
</form>
<p>
By clicking the Sign Up button,you agree to our <br />
<a href="#">Terms and Condition</a> and <a href="#">Policy Privacy</a>
</p>
</div>
<p class="para-2">
Already have an account? <a href="login.html">Login here</a>
</p>
</body>
</html>
Login HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login | By Code Info</title>
<link rel="stylesheet" href="Css/style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="login-box">
<h1>Login</h1>
<form>
<label>Email</label>
<input type="email" placeholder="" />
<label>Password</label>
<input type="password" placeholder="" />
<input type="button" value="Submit" />
</form>
</div>
<p class="para-2">
Not have an account? <a href="signup.html">Sign Up Here</a>
</p>
</body>
</html>
Во-вторых, создайте файл CSS с именем style.css и вставьте указанные коды в свой файл CSS. Помните, вы должны создать файл с расширением .css.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sign Up | By Code Info</title>
<link rel="stylesheet" href="Css/style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="signup-box">
<h1>Sign Up</h1>
<h4>It's free and only takes a minute</h4>
<form>
<label>First Name</label>
<input type="text" placeholder="" />
<label>Last Name</label>
<input type="text" placeholder="" />
<label>Email</label>
<input type="email" placeholder="" />
<label>Password</label>
<input type="password" placeholder="" />
<label>Confirm Password</label>
<input type="password" placeholder="" />
<input type="button" value="Submit" />
</form>
<p>
By clicking the Sign Up button,you agree to our <br />
<a href="#">Terms and Condition</a> and <a href="#">Policy Privacy</a>
</p>
</div>
<p class="para-2">
Already have an account? <a href="login.html">Login here</a>
</p>
</body>
</html>
Login HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login | By Code Info</title>
<link rel="stylesheet" href="Css/style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="login-box">
<h1>Login</h1>
<form>
<label>Email</label>
<input type="email" placeholder="" />
<label>Password</label>
<input type="password" placeholder="" />
<input type="button" value="Submit" />
</form>
</div>
<p class="para-2">
Not have an account? <a href="signup.html">Sign Up Here</a>
</p>
</body>
</html>What is GEEK
Buddha Community
1618667723
Sidebar Menu Using Only HTML and CSS | Side Navigation Bar
how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.
#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css
1617789060
HTML Tutorial For Beginners
The prospect of learning HTML can seem confusing at first: where to begin, what to learn, the best ways to learn — it can be difficult to get started. In this article, we’ll explore the best ways for learning HTML to assist you on your programming journey.
What is HTML?
Hypertext Markup Language (HTML) is the standard markup language for documents meant to be displayed in a web browser. Along with Cascading Style Sheets (CSS) and JavaScript, HTML completes the trio of essential tools used in creating modern web documents.
HTML provides the structure of a webpage, from the header and footer sections to paragraphs of text, videos, and images. CSS allows you to set the visual properties of different HTML elements, like changing colors, setting the order of blocks on the screen, and defining which elements to display. JavaScript automates changes to HTML and CSS, for example, making the font larger in a paragraph when a user clicks a button on the page.
#html #html-css #html-fundamentals #learning-html #html-css-basics #html-templates
1621077133
Responsive Footer Design using HTML, CSS & Bootstrap
Hello Readers, welcome to my other blog, today in this blog I’m going to create a Responsive Footer by using HTML & CSS only. Earlier I have shared How to create a Responsive Navigation Menu and now it’s time to create a footer section.
As you can see on the image which is given on the webpage. There are various important topics there like About us, Our services and subscribes, some social media icons, and a contact section for easy connection. I want to tell you that it is fully responsive. Responsive means this program is fit in all screen devices like tablet, small screen laptop, or mobile devices.
#responsive footer html css template #footer design in html #simple footer html css code #simple responsive footer codepen #responsive footer code in html and css #responsive footer html css codepen
1603188000
Creating a CSS Visual Cheatsheet
The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.
This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.
In the end any layout could and should be split into parts/blocks and we see every block separately.
Here is our first take on that and we would be happy to keep extending it to help us all.
Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.
#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics
1678823280
Как создать боковое меню с помощью HTML, CSS и JavaScript
В этой статье вы узнаете, как создавать боковые меню с помощью кода программирования HTML, CSS и JavaScript. Раньше я разработал еще много боковых меню . Надеюсь, вам нравятся эти боковые меню, такие как дизайн.
В этом случае я использовал HTML для создания и программный код CSS для дизайна. В этом случае для активации кнопки меню было использовано небольшое количество JavaScript. Если вы хотите создать боковое меню без кода программирования JavaScript, вы можете посмотреть другие проекты, которые я сделал . Нажатие на кнопку меню здесь скроет всю строку меню.
Когда вы снова нажмете на эту кнопку, появится полная строка меню. Это меню боковой панели выполнено в современном стиле и имеет все необходимое, чтобы сделать боковую панель красивой и привлекательной.
Меню боковой панели с использованием HTML CSS JavaScript
Прежде всего, здесь я использовал изображение профиля. Ниже находится место, где можно дать имена и описания. Ниже я добавил много пунктов меню. Я добавил иконки к каждому пункту меню. Добавление значков делает пункты меню более красивыми и привлекательными.
При желании вы можете изменить эти пункты меню по своему вкусу. Здесь в качестве фона я использовал синий цвет ( background: rgb (5, 68, 104); ) и добавил цветовой эффект при наведении на элементы меню. Иконки будут менять фон, когда вы наводите курсор или нажимаете на пункты меню. Боковое меню представляет собой очень простой и незамысловатый дизайн, который вы, несомненно, сможете научиться делать очень легко.
Если вы хотите увидеть живую демонстрацию этой структуры, вы можете увидеть демонстрационный раздел ниже. Вы также можете скопировать оттуда необходимый исходный код и использовать его в своих целях.
Надеюсь, вам понравилась демонстрация выше, и вы заинтересованы в создании этого дизайна. Если вам нужен исходный код, необходимый для его создания, вы можете скопировать исходный код из демонстрационного раздела выше. Вы также можете загрузить исходный код , нажав кнопку загрузки ниже.
Если вы новичок, вы должны следовать приведенному ниже руководству, чтобы узнать, как шаг за шагом создать это боковое меню . Это требует от вас знания основ программирования HTML, CSS и JavaScript.
Шаг 1: Создайте базовую структуру для боковых панелей
Вы создаете файл HTML, затем копируете приведенную ниже структуру и добавляете ее в этот файл HTML. В следующей структуре я дал информацию, где именно вы добавите следующий программный код.
<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.8.1/css/all.css”>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<style>
</style>
</head>
<body>
<div class=”wrapper”>
<!–Top Menu & Menu button–>
<div class=”sidebar”>
<div class=”profile”>
<!–Profile Image–>
<!–Profile Title & Descruption–>
</div>
<!–Menu item–>
</div>
</div>
<script>
</script>
</body>
</html>Следующий программный код представляет собой CSS, который изначально использовался для оформления и окраски фона этого бокового меню. В этом случае я использовал синий цвет в качестве фона. Вы можете использовать другие цвета по вашему выбору, если хотите.
@import url(‘https://fonts.googleapis.com/css2?family=Open+Sans&display=swap’);
*{
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Open Sans’, sans-serif;
}
body{
background: #f5f6fa;
}
.wrapper .sidebar{
background: rgb(5, 68, 104);
position: fixed;
top: 0;
left: 0;
width: 225px;
height: 100%;
padding: 20px 0;
transition: all 0.5s ease;
}
.wrapper .sidebar .profile{
margin-bottom: 30px;
text-align: center;
}
Шаг 2. Добавьте изображение профиля
Прежде всего, я использовал здесь изображение профиля, которое помогло добавить следующий HTML-код. Следующие коды CSS помогли спроектировать и создать это изображение профиля.
<img src=”https://1.bp.blogspot.com/-vhmWFWO2r8U/YLjr2A57toI/AAAAAAAACO4/0GBonlEZPmAiQW4uvkCTm5LvlJVd_-l_wCNcBGAsYHQ/s16000/team-1-2.jpg” alt=”profile_picture”>.wrapper .sidebar .profile img{
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
Шаг 3. Добавьте заголовки и описания.
Под изображением я добавил немного текста. Если вы видели демонстрацию выше, вы поймете, что я использовал имя и профессионал под изображением профиля здесь. Следующие коды программирования HTML и CSS помогли создать и спроектировать это.
<h3>Anamika Roy</h3>
<p>Designer</p>.wrapper .sidebar .profile h3{
color: #ffffff;
margin: 10px 0 5px;
}
.wrapper .sidebar .profile p{
color: rgb(206, 240, 253);
font-size: 14px;
}
Шаг 4. При необходимости добавьте элементы меню с помощью HTML-кода.
Среди этих боковых меню выделяется пункт меню, который я использовал для создания следующих программных кодов HTML. В этом случае я использовал одну иконку перед каждым пунктом меню. Следующие коды программирования HTML помогли создать это. Конечно, чтобы активировать эти значки, вы будете использовать ссылку Font Awesome CDN в разделе заголовка вашего HTML-файла.
<ul>
<li>
<a href=”#” class=”active”>
<span class=”icon”><i class=”fas fa-home”></i></span>
<span class=”item”>Home</span>
</a>
</li>
<li>
<a href=”#”>
<span class=”icon”><i class=”fas fa-desktop”></i></span>
<span class=”item”>My Dashboard</span>
</a>
</li>
<li>
<a href=”#”>
<span class=”icon”><i class=”fas fa-user-friends”></i></span>
<span class=”item”>People</span>
</a>
</li>
<li>
<a href=”#”>
<span class=”icon”><i class=”fas fa-tachometer-alt”></i></span>
<span class=”item”>Perfomance</span>
</a>
</li>
<li>
<a href=”#”>
<span class=”icon”><i class=”fas fa-database”></i></span>
<span class=”item”>Development</span>
</a>
</li>
<li>
<a href=”#”>
<span class=”icon”><i class=”fas fa-chart-line”></i></span>
<span class=”item”>Reports</span>
</a>
</li>
<li>
<a href=”#”>
<span class=”icon”><i class=”fas fa-user-shield”></i></span>
<span class=”item”>Admin</span>
</a>
</li>
<li>
<a href=”#”>
<span class=”icon”><i class=”fas fa-cog”></i></span>
<span class=”item”>Settings</span>
</a>
</li>
</ul>Шаг 5: Создайте элементы меню с помощью кода CSS
Следующие коды программирования помогли сделать дизайн меню выше основного дизайна. Это означает, что для указания размера и цвета значков и текста использовались следующие коды CSS.
.wrapper .sidebar ul li a{
display: block;
padding: 13px 30px;
border-bottom: 1px solid #10558d;
color: rgb(241, 237, 237);
font-size: 16px;
position: relative;
}
.wrapper .sidebar ul li a .icon{
color: #dee4ec;
width: 30px;
display: inline-block;
}
Шаг 6: Добавьте эффект наведения к ссылке меню
Для элементов меню на боковой панели использовался цветовой эффект при наведении, что означает, что цвет фона будет меняться при нажатии на элементы. Для изменения этого цвета использовались следующие коды CSS. В этом случае при изменении цвета фона будет меняться цвет текста и значков.
.wrapper .sidebar ul li a:hover,
.wrapper .sidebar ul li a.active{
color: #0c7db1;
background:white;
border-right: 2px solid rgb(5, 68, 104);
}
.wrapper .sidebar ul li a:hover .icon,
.wrapper .sidebar ul li a.active .icon{
color: #0c7db1;
}
.wrapper .sidebar ul li a:hover:before,
.wrapper .sidebar ul li a.active:before{
display: block;
}
Шаг 7: Добавьте панель навигации
В этом случае я использовал панель навигации, но не добавлял в нее никаких пунктов меню. Я использовал кнопку в этой строке меню. Нажатие на эту кнопку скрывает боковую панель, а повторное нажатие показывает боковую панель. Следующий программный код HTML помог создать его.
<div class=”section”>
<div class=”top_navbar”>
<div class=”hamburger”>
<a href=”#”>
<i class=”fas fa-bars”></i>
</a>
</div>
</div>
</div>Используется для оформления панели вверху, сделанной выше, и для оформления значка меню.
.wrapper .section{
width: calc(100% – 225px);
margin-left: 225px;
transition: all 0.5s ease;
}
.wrapper .section .top_navbar{
background: rgb(7, 105, 185);
height: 50px;
display: flex;
align-items: center;
padding: 0 30px;
}
.wrapper .section .top_navbar .hamburger a{
font-size: 28px;
color: #f4fbff;
}
.wrapper .section .top_navbar .hamburger a:hover{
color: #a2ecff;
}
Этот код указывает, что изменится на боковой панели, когда вы нажмете эту кнопку меню. Если вы посмотрите ниже, то увидите, что при активации кнопки меню боковая панель сдвинется на 225 пикселей влево, что означает, что боковая панель будет полностью скрыта.
body.active .wrapper .sidebar{
left: -225px;
}
body.active .wrapper .section{
margin-left: 0;
width: 100%;
}Шаг 8. Активируйте кнопки меню с помощью кода JavaScript
Выше я показал, что изменится, когда вы нажмете на эту кнопку меню. Теперь вам нужно сделать эту кнопку меню эффективной. То есть, когда вы нажмете на эту кнопку, сработает инструкция, приведенная в приведенном выше коде CSS. Для этого я использовал небольшой фрагмент кода JavaScript, который приведен ниже.
var hamburger = document.querySelector(“.hamburger”);
hamburger.addEventListener(“click”, function(){
document.querySelector(“body”).classList.toggle(“active”);
})
Надеюсь, из этого руководства вы узнали, как создаются боковые меню с использованием кода программирования HTML, CSS и JavaScript. Тем временем я разработал боковую панель меню, используя только код HTML и CSS без JavaScript.
Оригинальный источник статьи: https://foolishdeveloper.com/