v24 form B2B registrace ( II )

by Petr Haluza

HTML

<link rel="stylesheet" href="https://www.asm.cz/css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="https://www.asm.cz/css/fontawesome/font-awesome.min.css">
<link rel="stylesheet" href="https://www.asm.cz/css/theme-asm.css?v=./../www/css/theme-asm.css">
<link rel="stylesheet" href="https://www.asm.cz/www/css/theme-asm-v2.css">

<!-- ikonz https://www.svgrepo.com/collection/dazzle-line-icons/ -->




<form class="v24-form-layout">

<div class="v24-form-header">
	
	<div class="v24-form-text-widget">
		<h2>Jen jeden krok vás dělí od nákupů u ASM</h2>
		<p>Získejte individuální ceny, podporu pro vaše projekty a další výhody, které ASM svým zákazníkům přináší.</p>
	</div><!-- /.v24-form-text-widget-->
	<div class="v24-form-text">
	 <p>Vyplnění formuláře zabere jen chvíli a po odeslání se můžete ihned pustit do nakupování.</p>
	</div><!-- /.v24-form-text-->
	<div id="v24-form-fakeTabs">
		<label><input type="radio" name="formSwitch" checked>Registrace firmy</label>
		<label><input type="radio" name="formSwitch">Soukromá osoba</label>
	</div>
</div><!-- /.v24-form-header -->





<div class="v24-form-container">

<section tab="firma">

	<div class="v24-input-row-heading">
		<h3>Údaje o firmě</h3>
		<span class="info"><figure class="red">!</figure>Vyplňte údaje shodné s Obchodním rejstříkem, údaje budou na vašich dokladech.</span>
	</div><!-- /.v24-input-row-heading -->

	<div class="v24-input-row">

		<div class="v24-input-wrap">
			<input class="v24-input" type="text" placeholder=" " required autocomplete="organization-id" id="ComRegId" n:name="ComRegId">
			<label class="v24-input-label">IČ firmy</label>
		</div><!-- /.v24-text-input-wrap -->

		<div class="v24-input-wrap">
			<input class="v24-input" type="text" placeholder=" " autocomplete="organization-tax" id="ComTaxNum" n:name="ComTaxNum">
			<label class="v24-input-label">DIČ</label>
		</div><!-- /.v24-text-input-wrap -->

	</div><!-- /.v24-input-row -->

	<div class="v24-input-row">

		<div...

CSS

html, body { height: 100%;  padding: 10px;  margin: 0;	box-sizing:border-box; }


/***** REG.FORM v24 
       barva svg ickon: #708991 
			 input pro password musí držet HTML elementy viz šablona https://jsfiddle.net/PetrHaluza/8kdcf4rj ******/
			 
			 /* základ */
.v24-input-wrap { min-width: 220px; flex-basis: calc(50% - 10px); height: 40px; border: 1px solid lightblue; border-radius: 8px; background: white; position: relative; overflow:hidden}
.v24-input-wrap:has(.v24-pass-icon)::before { content: ''; position: absolute; display: block; top: 50%; right: 10px;  transform: translateY(-50%); width: 30px; height: 30px; background-color: lightblue; border-radius: 50%; transition: all .5s; z-index: 1} /* input password */
.v24-input-wrap.readable::before { width: 120%; height: 120%; right: -10px; border-radius:0}
.v24-input-wrap-fullW {min-width: 450px; flex-basis: calc(100% - 10px);}
.v24-input-wrap input { 
	position: absolute; padding: 0 5px 0 18px; width: 100%; line-height: 40px; font-size: 14px; color: #1a2127; border: none; background-color: transparent !important; outline: none;  z-index: 11}
.v24-input-wrap:has(.v24-pass-icon) input {padding: 0 50px 0 45px;}
.v24-input-wrap input:-webkit-autofill,.v24-input-wrap input:-webkit-autofill:hover,.v24-input-wrap input:-webkit-autofill:focus,.v24-input-wrap input:-webkit-autofill:active{ -webkit-background-clip: text;}
.v24-input-wrap input {caret-color: lightblue;}
.v24-input-wrap .v24-input-label { cursor: text; display: flex; position: absolute; z-index: 10; top: 50%; transform: translateY(-50%); left: 1em; transform-origin: 0 0; transition: color .25s, transform .25s; padding:0; text-rendering: geometricPrecision; color: #68909d; font-weight: 400;}
.v24-input-wrap:has(.v24-pass-icon) .v24-input-label { left: calc(1em + 30px)}

.v24-input-wrap .v24-input:focus-visible + .v24-input-label, 
.v24-input-wrap .v24-input:not(:placeholder-shown) + .v24-input-label{ transform: translateY(-110%) scale(0.85);...

JavaScript

// HAP obsluha inputu password, viz šablona "v24 form"
$(function(){
  $("body").on("click", ".v24-eye-icon", function(){
    var eye = $(this).parent();
		var pas = $(this).nextAll("input");
    if(eye.hasClass("readable")){
      eye.removeClass("readable");
      pas.attr("type","password");
    }else {
      eye.addClass("readable");
      pas.attr("type","text");
    }
  });
});