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

Die Kennzeichnung des Labels mit der Klasse "aural" ist optional und vom jeweiligen Einsatz abhängig.

                <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>

Variante mit der Möglichkeit neben dem jeweiligen Auftritt auch den gesamten Berlin.de Raum zu durchsuchen.

Wo soll gesucht werden? 
                <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>

Variante mit Link zur erweiterten Suche

Zur erweiterten Suche 
                <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>

Variante mit Links zur Schnellsuche. Diese haben einen grauen, halbtransparenten Hintergrund, der auch auf farbigen Hintergründen (z.B. Bildopener mit Suchfeld-Overlay) die Lesbarkeit ermöglicht.

                <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>