Skip to content

Inputs

This section presents various types of input elements that can be used in HTML forms. Each example includes the HTML code and styling using the sf-input class.

text


<input class="sf-input" placeholder="text" pattern=".*\S+.*" />
html

<input class="sf-input" type="search" placeholder="search" />
html

email


<input class="sf-input" type="email" placeholder="email" pattern="\w+@\w+\.\w{2,}" required />
html

password


<input class="sf-input" type="password" placeholder="password" pattern="\w{16,}" autocomplete="off" required />
html

tel


<input class="sf-input" type="tel" placeholder="tel" required />
html

number


<input class="sf-input" type="number" placeholder="number" />
html

url


<input class="sf-input" type="url" placeholder="url" />
html

datetime


<input class="sf-input" type="datetime-local" />
html

date


<input class="sf-input" type="date" />
html

time


<input class="sf-input" type="time" />
html

month


<input class="sf-input" type="month" />
html

week


<input class="sf-input" type="week" />
html

Conclusion

Using these examples, you can create a variety of forms with different types of input elements to meet your requirements. All elements are styled using the sf-input class for a consistent look and feel.

Released under the MIT License