Главная » Языки программирования

Form authorization html css

Содержание
  1. Форма авторизации на простом HTML с пояснениями
  2. Базовая разметка простой формы авторизации:
  3. 36 CSS Login Forms
  4. Related Articles
  5. Author
  6. Links
  7. Made with
  8. About a code
  9. Hacker Login Form
  10. Author
  11. Links
  12. Made with
  13. About a code
  14. Finance Mobile Application-UX/UI Design Screen One
  15. Author
  16. Links
  17. Made with
  18. About a code
  19. Login Form
  20. Author
  21. Links
  22. Made with
  23. About a code
  24. Glassmorphism Login Form
  25. Author
  26. Links
  27. Made with
  28. About a code
  29. Sign Up / Login Form
  30. Author
  31. Links
  32. Made with
  33. About a code
  34. Creative and Customizable Registration Form
  35. Author
  36. Links
  37. Made with
  38. About a code
  39. eCommerce Registraion Form
  40. Author
  41. Links
  42. Made with
  43. About a code
  44. Registration Form #18
  45. Author
  46. Links
  47. Made with
  48. About a code
  49. Sign Up Form #26
  50. Author
  51. Links
  52. Made with
  53. About a code
  54. Sign Up Form #7
  55. Author
  56. Links
  57. Made with
  58. About a code
  59. Glassmorphism Login Form
  60. Author
  61. Links
  62. Made with
  63. About the code
  64. Sign Up Modal
  65. Author
  66. Links
  67. Made with
  68. About the code
  69. Double Slider Sign In/Up Form
  70. Author
  71. Links
  72. Made with
  73. About the code
  74. Login Form
  75. Author
  76. Links
  77. Made with
  78. About the code
  79. Simple Registration Form
  80. Author
  81. Links
  82. Made with
  83. About the code
  84. Login Modal Form
  85. Author
  86. Links
  87. Made with
  88. About the code
  89. Cube Login Form
  90. Author
  91. Links
  92. Made with
  93. About the code
  94. Login Form with Floating Labels
  95. Author
  96. Links
  97. Made with
  98. About the code
  99. Prismatic Forms
  100. Author
  101. Links
  102. Made with
  103. About the code
  104. Login Form Animation
  105. Author
  106. Links
  107. Made with
  108. About the code
  109. Login/Sign Up Form Animation
  110. Author
  111. Links
  112. Made with
  113. About the code
  114. Form UI Animation
  115. Author

Форма авторизации на простом HTML с пояснениями

Добрый день. Конечно всем эта тема знакома уже много лет, но она будет кому то полезна особенно новичкам, которые ищут форму авторизации. Формы бывают разные и я буду добавлять новые, чтобы кто то не тратил много времени на поиски готовых решений. Это будут формы авторизации из двух полей, форма авторизации по номеру телефона, форма авторизации с «галочкой» запомнить, а так же формы авторизации с капчей от гугл. Еще добавлю, что все формы будут иметь уникальные классы блоков, что позволит их использовать на любых проектах, чтобы не ломать действующие возможные стили и пересечения классов блоков.

Читайте также:  Java what class is null

Базовая разметка простой формы авторизации:

Базовая разметка HTML для простой формы авторизации:

 
 
Авторизация

В данной разметке мы создали простой блок родитель в котором будут храниться все остальные блоки, как видно их не так много. Блоки названы одноименными классами, так легче понять о чем идет суть и какие стили к чему относятся в структуре. Обратите внимание на type для двух input, поскольку первый является полем для ввода имейл адреса его тип выбран как email это позволит пользователю в простой проверке браузера избежать ошибки к примеру в отсутствии @ или попросту точки перед доменной зоной.

Второй input имеет тип password это скрывает пароль от глаз в виде точек. Это не так критично, многие предпочитают тип text, но правильнее все же будет использовать тип password, о других нюансах выбора типа поля input будет рассказано в другой статье.

Placeholder — простым словом «тег подсказка», он дает возможность указать для пользователя что ему требуется сделать, что разрешено, а что нет. Можно указать любое значение. Обратите внимание что тег placeholder можно изменить с помощью стилей CSS.

Обратите внимание что в input так же задано свойство name, оно необходимо для последующей работы с формой, когда дело доходит до ее обработки на сервере. Это значение нужно делать уникальным и желательно схожим по названию отражающем его сущность. Если это форма авторизации, то логичнее всего задать name=»auth_email», таким образом мы будем понимать что это свойство отвечает за передачу email адреса из формы авторизации. Многие новички в последующем делают частую ошибку работая с обработкой этих данных на сервере, особенно работая по паттерну MVC, когда в контроллере срабатывает событие к примеру submit а данные свойства name остаются везде одинаковые к примеру name=»email».

Читайте также:  Комментирование

Простые стили к форме авторизации без адаптации под мобильные устройства:

.form_auth_block < width: 500px; height: 500px; margin: 0 auto; background: url(http://www.dailycompass.org/wp-content/uploads/2013/01/Bubbles.jpg); background-size: cover; border-radius: 4px; >.form_auth_block_content < padding-top: 15%; >.form_auth_block_head_text < display: block; text-align: center; padding: 10px; font-size: 20px; font-weight: 600; background: #ffffff; opacity: 0.7; >.form_auth_block label < display: block; text-align: center; padding: 10px; background: #ffffff; opacity: 0.7; font-weight: 600; margin-bottom: 10px; margin-top: 10px; >.form_auth_block input < display: block; margin: 0 auto; width: 80%; height: 45px; border-radius: 10px; border:none; outline: none; >input:focus < color: #000000; border-radius: 10px; border: 2px solid #436fea; >.form_auth_button < display: block; width: 80%; margin: 0 auto; margin-top: 10px; border-radius: 10px; height: 35px; border: none; cursor: pointer; >::-webkit-input-placeholder // Это стили для placeholder ::-moz-placeholder // Это стили для placeholder :-moz-placeholder // Это стили для placeholder :-ms-input-placeholder // Это стили для placeholder

image

И вот что у нас получилось в итоге:

Простая форма авторизации из двух полей и небольшим количеством стилей. Давайте усложним задачу и сделаем эту форму более отзывчивой и добавим ей немного мобильной адаптации.

Источник

36 CSS Login Forms

Discover a collection of stylish and functional CSS login forms for your website from CodePen, GitHub, and other resources. Our update includes eight new items that will enhance your website’s user experience and improve the login process.

In today’s world, where most interactions take place online, creating a user-friendly and functional login form is crucial for any website or application. In this collection, we will explore some of the best pure CSS login forms available for free on the web, along with their features and benefits. Whether you’re a web developer or designer, these login forms are sure to inspire and help you create a seamless login experience for your users.

Demo image: Hacker Login Form

  1. Bootstrap Login Forms

Author

Made with

About a code

Hacker Login Form

The Hacker Login Form is a unique and creative login form designed to resemble a hacker’s terminal. Overall, the Hacker Login Form is a fun and engaging login form that can add a unique touch to any website or application.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Finance Mobile Application-UX/UI Design Screen One

Author

Made with

About a code

Finance Mobile Application-UX/UI Design Screen One

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Login Form

Author

Made with

About a code

Login Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Glassmorphism Login Form

Author

Made with

About a code

Glassmorphism Login Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Sign Up / Login Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Creative and Customizable Registration Form

Author

Made with

About a code

Creative and Customizable Registration Form

The form is fully customizable, allowing you to add or remove fields as per your requirements. You can also change the color scheme and fonts to match your brand’s identity. The form is easy to use and navigate, making it a great choice for users.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: eCommerce Registraion Form

Author

Made with

About a code

eCommerce Registraion Form

The form’s modern design and responsive layout make it a great addition to any website looking to improve its user experience.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Registration Form #18

Author

Made with

About a code

Registration Form #18

A modern and stylish registration form template that can be easily customized to fit any website. With its clean design and user-friendly interface, this form is perfect for collecting user information and creating a seamless registration process. It includes fields for name, email, password, and more.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Sign Up Form #26

Author

Made with

About a code

Sign Up Form #26

A modern and stylish registration form template that can be used for various purposes. It features a clean and minimal design with a beautiful color scheme that can be customized to match your brand. The form includes fields for name, email, password, and confirmation, as well as a submit button. The template is fully responsive and can be easily integrated into your website or application.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Sign Up Form #7

Author

Made with

About a code

Sign Up Form #7

Instead of getting one free creative signup form template, this bundle offers you two lovely alternatives to play with.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Glassmorphism Login Form

Author

Made with

About a code

Glassmorphism Login Form

The form has a transparent glass-like effect with a blurred background, giving it a sleek and elegant look. The form has a username and password input field with attractive focus effect, making it easy for users to interact with.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Sign Up Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css, jquery.js, bootstrap.js, popper.js

Author

Made with

About the code

Double Slider Sign In/Up Form

Double slider login form in HTML, CSS and JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Login Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Simple Registration Form

Simple HTML and CSS registration form with validation.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About the code

Login Modal Form

HTML and CSS modal login form with little JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Cube Login Form

Author

Made with

About the code

Cube Login Form

Pure CSS cube buttons and inputs for login form with gradien styles.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Login Form with Floating Labels

Author

Made with

About the code

Login Form with Floating Labels

Pure CSS login form with floating labels.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Prismatic Forms

Author

Made with

About the code

Prismatic Forms

Prismatic login, sign up and other forms.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Login Form Animation

Author

Made with

About the code

Login Form Animation

Login page animation template created with CSS3 and vanilla JavaScript DOM elements. Will surely try to upgrade it with more better animation effects.

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Login/Sign Up Form Animation

Author

Made with

About the code

Login/Sign Up Form Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Form UI Animation

Form transitions UI based on Dominik Markušić dribble.

Author

Источник

Оцените статью
© 2024 Программирование