Style-Forge

Appearance

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.