form表单中的常用控件

    <form action="#" method="post">
        placeholder:输入表单是提供一个提示
        <input type="text" value="" name="text" placeholder="placeholder提供一个提示"/><br />
        required:这个属性可以用于任何表单控件,它指示一个域是必要的,所有对于设置了这个
                  属性的控件,如果没有为这个控件指定一个值,就无法正常提交表单。
                  在支持这个属性的浏览器中,如果没有为required属性的域指定一个值,提交表单时
                  你会得到一个错误消息,表单不会提交到服务器。
        <input type="text" placeholder="提示信息" required />
        <br />

        文本输入框:<input type="text" value="" name="text" /><br />
        密码输入框:<input type="password" value="123456" /><br />
        文件上传控件:<input type="file" /><br />
        单选按钮:
        <input type="radio" name="radio" id="radioA" value="单选" checked/><label for="radioA">单选一</label>
        <label><input type="radio" name="radio" value="不选" />单选二</label> 
        <br />
fieldset:设置一个分组,legend是一个标题 <fieldset> <legend>多选框</legend> <label><input type="checkbox" name="checkbox" value="多选一" />多选一</label> <label><input type="checkbox" name="checkbox" value="多选二" />多选二</label> </fieldset> <br /> 多选列表控件: <select multiple> <option>襄阳</option> <option>武汉</option> <option>长沙</option> <option>岳阳</option> </select> <br /> 下拉列表:
optgroup是设置一个选项分组
<select> <optgroup label="湖北省"> <option>襄阳</option> <option>武汉</option> </optgroup> <optgroup label="湖南省"> <option>长沙</option> <option>岳阳</option> </optgroup> </select> <br /> 文本区: <textarea rows="10" cols="40"></textarea> <br /> 数字输入:<input type="number" min="0" max="20" /> <br /> 范围输入: <input type="range" min="0" max="30" step="1" value="2"/> <br /> 颜色输入: <input type="color" /> <br /> 日期: <input type="date" /> <br />
Email输入: <input type="email" /> <br /> Tel输入: <input type="tel" /> <br /> URL输入: <input type="url" /> <br />
type属性为email、tel、url时,与text没太大变化,是text的一个变种。不过在移动设备上可以看出效果,比如tel值,移动设备检测到后会默认显示数字键盘
</form>

例子样式:

 

原文地址:https://www.cnblogs.com/wind-wang/p/6062451.html