表单标签的各种样式用法及注意事项
表单标签可以用来创建文本框、单选框、多选框、普通按钮，提交按钮、搜索框、可选择日期的日历表、和滑块的样式。下面我将一一为大家讲解。
1.制作文本框
首先用文本标签设置文本框，然后使用autofocus属性 自动获取焦点，
使用value设置默认值，使用placeholder 标签设置提示信息。
代码如下所示：
<body>
<form action="">
<input type="text" autofocus value="11"placeholder="111">
</form>
运行代码如下图所示：
2.制作单选框
制作单选框时，需要注意需要单选的选项必须有相同的name属性名称。需要用的的是radio属性，用checked 属性默认选中。
<body>
<form action="">
<input type="radio"name="a" checked/>女
<input type="radio"name="a"/>男
</form>
运行结果如下图所示：在这里默认选择女生。
3.制作多选框
制作多选框时，需要用到checkbox属性，依旧是checked默认选中。
<body>
<form action="">
<input type="checkbox" checked/>篮球
<input type="checkbox" />足球
<input type="checkbox"/>羽毛球
</form>
</body >
运行结果如图所示：
4. 制作提交按钮
制作提交按钮时，需要使用button属性：
<body>
<form action="">
<input type="button"value="提交按钮"/>
</form>
</body>
运行结果如图所示：
5.制作重要按钮
与上面的不同的是，此时需要使用的是submit按钮，这个按钮可将内容提交到后台中去，
代码如下所示：
<body>
<form action="">
<input type="submit"value="提交“/>
</form>
</body>
运行结果如图所示：
6.制作一个可上传一个文件或多个文件
这里需要用到的是file属性，当你点击按钮时会打开电脑文件页面可以选择文件 实例如下
<body>
<form action="">
<input type="file"/>
</form>
</body>
运行结果：
6.制作一个搜索框
制作搜索框使用的是search属性。示例如下：
<body>
<form action="">
<input type="search"/>
</form>
</body>
运行结果如下：
7.制作一个可选择日期的日历表
制作日历表可使用的是date属性，示例如下：
<body>
<form action="">
<input type="date"/>
</form>
</body>
运行结果如图所示：
8.制作输入电话号码的输入框
与上面的输入框不同的是，此输入框可限制输入的字数，一般用于输入电话号码等。示例如下：这里设置最小字符长度为11
<body>
<form action="">
<input type="tel" minlenght="11"/>
</form>
</body>
9.制作一个滑块
制作滑块需要用到的属性是range ,需要设置最大值，最小值
示例如下：
<body>
<form action=""/>
<input type="range" max="10"min="1"/>
</form>
</body>
运行结果如下图所示：
1339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
