<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Semantic-UI Input Variations</
title
>
<
link
rel
=
"stylesheet"
href
=
</
head
>
<
body
>
<
div
class
=
"ui container"
>
<
br
/><
br
/>
<
h2
class
=
"ui header green"
>GeeksforGeeks</
h2
>
<
b
>
<
p
>Semantic UI Input Variations</
p
>
</
b
>
<
hr
><
br
/>
<
span
>Icon Variation : </
span
>
<
div
class
=
"ui icon input"
>
<
input
type
=
"text"
placeholder
=
"Enter name to search..."
>
<
i
class
=
"search icon"
></
i
>
</
div
>
<
br
/><
br
/>
<
span
>Labeled Variation : </
span
>
<
div
class
=
"ui right labeled left icon input"
>
<
i
class
=
"folder icon"
></
i
>
<
input
type
=
"text"
placeholder
=
"Create new account"
>
<
a
class
=
"ui tag label"
>
New
</
a
>
</
div
>
<
br
/><
br
/>
<
span
>Action Variation : </
span
>
<
div
class
=
"ui action input"
>
<
input
type
=
"text"
id
=
"input"
placeholder
=
"Enter your message"
>
<
button
class
=
"ui teal button"
>
Click
</
button
>
</
div
>
<
br
/><
br
/>
<
span
>Transparent Variation : </
span
>
<
div
class
=
"ui transparent input"
>
<
input
type
=
"text"
placeholder
=
"Enter name / email"
>
</
div
>
<
br
/><
br
/>
<
div
class
=
"ui inverted segment"
>
<
p
>Inverted Variation : </
p
>
<
div
class
=
"ui inverted input"
>
<
input
type
=
"text"
placeholder
=
"Enter your name here"
>
</
div
>
</
div
>
<
br
/><
br
/>
<
p
>Fluid Variation : </
p
>
<
div
class
=
"ui fluid icon input"
>
<
input
type
=
"text"
placeholder
=
"Enter name to search..."
>
<
i
class
=
"search icon"
></
i
>
</
div
>
<
br
/><
br
/>
<
p
>Size Variation : </
p
>
<
div
class
=
"ui mini input"
>
<
input
type
=
"text"
value
=
"Mini"
/>
</
div
>
<
div
class
=
"ui small input"
>
<
input
type
=
"text"
value
=
"Small "
/>
</
div
>
<
div
class
=
"ui large input"
>
<
input
type
=
"text"
value
=
"Large "
/>
</
div
>
<
br
/><
br
/>
</
div
>
</
body
>
</
html
>