Searchform (slot)
Das Suchfeld gibt es in verschiedenen Varianten. Als einfaches Suchfeld für die Suche innerhalb des jeweiligen Auftritts und als Suchfeld mit der Möglichkeit neben dem jeweiligen Auftritt auch den gesamten Berlin.de Raum zu durchsuchen. Die Funktionalität der Suche muss selbst implementiert werden. Es kann optional ein Footerbereich mit einem erweitertem Suchlink eingefügt werden.
.searchform-slot
<form >
<div class="searchform-slot ">
<div class="form-group">
<label class="aural" for="myInputField">Suchbegriff</label>
<div class="searchterm">
<div class="input-wrapper">
<i class="bicon bicon-search lens" aria-hidden="true"></i>
<input type="search" class="form-control search" value="" placeholder="Suchbegriff" name="myInputField" id="myInputField" >
</div>
<button class="submit " type="submit" title="Suchen">
<span class="aural">Suchen</span><i class="bicon bicon-arrow-right icon" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</form>
<form >
<div class="searchform-slot ">
<fieldset class="searchlocation">
<legend class="label">Wo soll gesucht werden?</legend>
<div class="form-check form-check-inline">
<label class="form-check-label" for="myCheckbox1">Portalname</label>
<input class="form-check-input" type="radio" id="myCheckbox1" name="exampleRadios" checked="checked">
</div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="myCheckbox2">Komplette Webseite von Berlin.de</label>
<input class="form-check-input" type="radio" id="myCheckbox2" name="exampleRadios" >
</div>
</fieldset>
<div class="form-group">
<label class="aural" for="myInputField">Suchbegriff</label>
<div class="searchterm">
<div class="input-wrapper">
<i class="bicon bicon-search lens" aria-hidden="true"></i>
<input type="search" class="form-control search" value="" placeholder="Suchbegriff" name="myInputField" id="myInputField" >
</div>
<button class="submit " type="submit" title="Suchen">
<span class="aural">Suchen</span><i class="bicon bicon-arrow-right icon" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</form>
<form >
<div class="searchform-slot ">
<div class="form-group">
<label class="form-label" for="myInputField">Suchen nach:</label>
<div class="searchterm">
<div class="input-wrapper">
<i class="bicon bicon-search lens" aria-hidden="true"></i>
<input type="search" class="form-control search" value="" placeholder="Suchbegriff" name="myInputField" id="myInputField" >
</div>
<button class="submit " type="submit" title="Suchen">
<span class="aural">Suchen</span><i class="bicon bicon-arrow-right icon" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="searchform__footer">
<a href="#">Zur erweiterten Suche</a>
</div>
</div>
</form>
<form >
<div class="searchform-slot ">
<div class="form-group">
<label class="form-label" for="myInputField">Suchen nach:</label>
<div class="searchterm">
<div class="input-wrapper">
<i class="bicon bicon-search lens" aria-hidden="true"></i>
<input type="search" class="form-control search" value="" placeholder="Suchbegriff" name="myInputField" id="myInputField" >
</div>
<button class="submit " type="submit" title="Suchen">
<span class="aural">Suchen</span><i class="bicon bicon-arrow-right icon" aria-hidden="true"></i>
</button>
</div>
</div>
<ul class="list--quicksearch-links" aria-label="Links zur Schnellsuche">
<li><a href="#">Suchbegriff 1</a></li>
<li><a href="#">Suchbegriff 2</a></li>
<li><a href="#">Suchbegriff 3</a></li>
<li><a href="#">Suchbegriff 4</a></li>
<li><a href="#">Suchbegriff 5</a></li>
</ul>
</div>
</form>