input

input:focus {
   text-decoration: underline;
   color: red;
   border: 1px solid blue;
}

input[type=range]:before { content: attr(min); padding-right: 5px; }
input[type=range]:after { content: attr(max); padding-left: 5px;}

<form method="post">                                                      # 一般都是 post

<form action=mailto:user@hsot enctype="text/plain">                       # 表单被提交后的工作

<input type="text" name="firstnaem" size="30" maxlength="100" required>   # required 表示必填

<input type="email" name="email-address"><br>
<input type="url" name="website"><br>
<input type="submit" value="Send"><br>                                    # 提交按钮
<input type="reset" value="Clear"><br>                                    # 重新填写
<input type="text" name="readonly" value="this is read only" readonly="readonly">
<input tyep="file" name="upload_file">

隐藏表单，一般用来传递参数，而又不想显示在客户端. 例如：
客户在网站在购买产品，点击提交的时候，通常程序会自动生成一个产品的订单编号，用于后台操作或者其它. 而我们通常是没必要把这个编号显示给客户看
<input type="hidden" name="id" value="some value">

<input type="text" name="test" size="20" placeholder="非必填">             # placeholder 提示信息

<textarea rows="5" cols="60">this is default text</textarea><br>
<textarea rows="8" cols="50" placeholder="this is default text" style="resize:none;"></textarea>

<input type="radio" name="test" value="1"> 1
<input type="radio" name="test" value="0"> 2

<form action=mailto:user@host enctype="text/plain">
    <input type="checkbox" name="one" value="yes"> one<br>
    <input type="checkbox" name="two" value="yes"> two<br>
    <input type="checkbox" name="three" value="yes"> three<br>
    <input type="checkbox" name="four" checked="checked"> four<br>  # 默认被选上
</form>

<input type="number" name="copies" min="0" max="1000" step="1" value="1">

<input type="range" name="copies" min="0" max="1000" step="1" value="1">

<input type="color">
<input type="tel">
<input type="search">