Placeholder in invoervak 3.2

Hulp nodig bij een stijl? Voor zowel XHTML/CSS als grafische vragen uiteraard gerelateerd aan phpBB3.
Plaats reactie
Gebruikersavatar
BennyBernaer
Berichten: 412
Lid geworden op: 05 jan 2008, 17:02
Locatie: Antwerpen
Contacteer:

Placeholder in invoervak 3.2

Bericht door BennyBernaer » 12 jan 2017, 21:12

Ik zou graag in het invoervak van login_body.html een placeholder willen toevoegen.
In het invoervak van gebruikersnaam placeholder="
In het invoervak van wachtwoord placeholder=""

Hoe en waar moet ik deze juist plaatsen?
Het zou er dan zo ongeveer moeten uitzien:
Afbeelding

En in onderstaande afbeelding (invoervak) moet de placeholder komen te staan
Afbeelding

Hieronder login_body.html

Code: Selecteer alles

<!-- INCLUDE overall_header.html -->

<form action="{S_LOGIN_ACTION}" method="post" id="login" data-focus="<!-- IF S_ADMIN_AUTH -->{PASSWORD_CREDENTIAL}<!-- ELSE -->{USERNAME_CREDENTIAL}<!-- ENDIF -->">
<div class="panel">
	<div class="inner">

	<div class="content">
		<h2 class="login-title"><!-- IF LOGIN_EXPLAIN -->{LOGIN_EXPLAIN}<!-- ELSE -->{L_LOGIN}<!-- ENDIF --></h2>

		<fieldset <!-- IF not S_CONFIRM_CODE -->class="fields1"<!-- ELSE -->class="fields2"<!-- ENDIF -->>
		<!-- IF LOGIN_ERROR --><div class="error">{LOGIN_ERROR}</div><!-- ENDIF -->
		<dl>
			<dt><label for="{USERNAME_CREDENTIAL}">{L_USERNAME}{L_COLON}</label></dt>
			<dd><input type="text" tabindex="1" name="{USERNAME_CREDENTIAL}" id="{USERNAME_CREDENTIAL}" size="25" value="{USERNAME}" class="inputbox autowidth" /></dd>
		</dl>
		<dl>
			<dt><label for="{PASSWORD_CREDENTIAL}">{L_PASSWORD}{L_COLON}</label></dt>
			<dd><input type="password" tabindex="2" id="{PASSWORD_CREDENTIAL}" name="{PASSWORD_CREDENTIAL}" size="25" class="inputbox autowidth" autocomplete="off" /></dd>
			<!-- IF S_DISPLAY_FULL_LOGIN and (U_SEND_PASSWORD or U_RESEND_ACTIVATION) -->
				<!-- IF U_SEND_PASSWORD --><dd><a href="{U_SEND_PASSWORD}">{L_FORGOT_PASS}</a></dd><!-- ENDIF -->
				<!-- IF U_RESEND_ACTIVATION --><dd><a href="{U_RESEND_ACTIVATION}">{L_RESEND_ACTIVATION}</a></dd><!-- ENDIF -->
			<!-- ENDIF -->
		</dl>
		<!-- IF CAPTCHA_TEMPLATE and S_CONFIRM_CODE -->
			<!-- DEFINE $CAPTCHA_TAB_INDEX = 3 -->
			<!-- INCLUDE {CAPTCHA_TEMPLATE} -->
		<!-- ENDIF -->
		<!-- IF S_DISPLAY_FULL_LOGIN -->
		<dl>
			<!-- IF S_AUTOLOGIN_ENABLED --><dd><label for="autologin"><input type="checkbox" name="autologin" id="autologin" tabindex="4" /> {L_LOG_ME_IN}</label></dd><!-- ENDIF -->
			<dd><label for="viewonline"><input type="checkbox" name="viewonline" id="viewonline" tabindex="5" /> {L_HIDE_ME}</label></dd>
		</dl>
		<!-- ENDIF -->

		{S_LOGIN_REDIRECT}
		<dl>
			<dt>&nbsp;</dt>
			<dd>{S_HIDDEN_FIELDS}<input type="submit" name="login" tabindex="6" value="{L_LOGIN}" class="button1" /></dd>
		</dl>
		</fieldset>
	</div>

	<!-- IF not S_ADMIN_AUTH and PROVIDER_TEMPLATE_FILE -->
		<!-- INCLUDE {PROVIDER_TEMPLATE_FILE} -->
	<!-- ENDIF -->
	</div>
</div>


<!-- IF not S_ADMIN_AUTH and S_REGISTER_ENABLED -->
	<div class="panel">
		<div class="inner">

		<div class="content">
			<h3>{L_REGISTER}</h3>
			<p>{L_LOGIN_INFO}</p>
			<p><strong><a href="{U_TERMS_USE}">{L_TERMS_USE}</a> | <a href="{U_PRIVACY}">{L_PRIVACY}</a></strong></p>
			<hr class="dashed" />
			<p><a href="{U_REGISTER}" class="button2">{L_REGISTER}</a></p>
		</div>

		</div>
	</div>
<!-- ENDIF -->

Gebruikersavatar
Theriddler
Berichten: 1103
Lid geworden op: 20 apr 2012, 07:47
Contacteer:

Re: Placeholder in invoervak 3.2

Bericht door Theriddler » 14 jan 2017, 20:59

Code: Selecteer alles

<dd><input type="text" tabindex="1" name="{USERNAME_CREDENTIAL}" placeholder="&#xe674;  {L_USERNAME}" style="font-family:Helvetica, 'FontAwesome', sans-serif" id="{USERNAME_CREDENTIAL}" size="25" value="{USERNAME}" class="inputbox autowidth" /></dd>

Code: Selecteer alles

<dd><input type="password" tabindex="2" id="{PASSWORD_CREDENTIAL}" name="{PASSWORD_CREDENTIAL}" placeholder="&#xe688;  {L_PASSWORD}" style="font-family:Helvetica, 'FontAwesome', sans-serif"  size="25" class="inputbox autowidth" autocomplete="off" /></dd>
Laatst gewijzigd door Theriddler op 15 jan 2017, 11:08, 1 keer totaal gewijzigd.
Reden: fontawesome toegevoegd

Plaats reactie