Маленькие ящики помощи для регистрации формы - PullRequest
Новая
       0

Маленькие ящики помощи для регистрации формы

0 голосов
/ 18 февраля 2020

Я создал страницу регистрации для моего сайта с Django.

В этой форме я хочу поместить небольшие поля или шарики рядом с полями ввода.

Например, когда пользователь нажимает или наводит флажок рядом с полем ввода пароля, должно быть написано, что «Пароль должен состоять из 8 букв и включает 1 заглавную букву» et c.

Как я могу это сделать?

регистрация. html

<!DOCTYPE html>
<html lang="en">

{% load static %}
    <link rel="stylesheet" href="{% static 'css/signup.css' %}">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <input type="radio" id="toggle--signup" name="toggle" class="ghost" />

 <! ––  <img class="logo framed" src="https://www.tumblr.com/images/logo/logo_large.png?v=7ea0eb57dd627a95f82be5bde0c43d59" alt="Tumblr logo" /> ––>


  <form class="form form--signup framed" method="post">
      {% csrf_token %}

      <h1 class=" text--centered">PHARSYS</h1>
      <h2 class="text text--centered text--omega">Join Us!</h2>

    <input type="text" placeholder="Username" name="username" maxlength="150" autofocus required id="id_username" class="input input--top">
    <input type="text" placeholder="First name" name="first_name" maxlength="30" id="id_first_name" class="input">
    <input type="text" placeholder="Last name" name="last_name" maxlength="30" id="id_last_name" class="input">
    <input type="email" placeholder="Email" class="input" name="email" maxlength="254" id="id_email"/>
    <input type="password" placeholder="Password" class="input" name="password1" required id="id_password1">
    <input type="password" placeholder="Confirm password" class="input" name="password2" required id="id_password2">

        <select class="input" name="user_type" required id="id_user_type">
            <option value="" selected>User Type</option>
            <option value="pharmacist">Pharmacist</option>
            <option value="manager">Medical Repository Manager</option>
        </select>
      <button type="submit" class="input input--submit">Sign Up!</button>

    <a class="text text--small text--centered" href="/users/login">I am already a member</a>

  </form>
  <div class="fullscreen-bg"></div>

</body>
</html>

1 Ответ

1 голос
/ 19 февраля 2020

Я только что нашел решение для этого здесь , но я покажу вам, как оно будет использоваться в вашем коде:

CSS: 

a.info{
position:relative; /*this is the key*/
z-index:24; background-color:#ccc;
color:#000;
text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center}

Это будет контролировать то, как на самом деле выглядит коробка, когда вы наводите курсор на что-то, на чем она используется, так что не стесняйтесь менять ее по своему усмотрению, очевидно. Поместив его в свою регистрацию. html будет выглядеть примерно так:

HTML: 

<a class=info href="#"><input type="text" placeholder="Username" name="username" maxlength="150" autofocus required id="id_username" class="input input--top">
<span>I'm a tooltip!</span></a>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...