关注重工黑大帅，学习不迷路

一、代码

<form action="success.html"><!--html4input类型属性值-->请输入文字：<input type="text" placeholder="文本框"><input type="submit" value="提交"><br>请输入密码：<input type="password" placeholder="密码框"><input type="submit" value="提交"><br>请进行单选：<input type="radio" placeholder="单选框"><input type="button" value="提交"><br>请进行多选：<input type="checkbox" placeholder="多选框" checked="checked"><input type="submit" value="提交"><br>请选择文件上传：<input type="file" placeholder="文件上传框"><input type="submit" value="提交"><br>信息重置：<input type="text" placeholder="文本框"><input type="reset" value="重置"><br>隐藏提交按钮：<input type="text" placeholder="文本框"><input type="hidden" value="隐藏"><br>请选择图片：<input type="image" placeholder="图片框"><input type="submit" value="提交"><br><!--html4input类型属性值end--></form>

二、实现结果：

三、代码

<form action="success.html"><!--html5input类型新属性值-->请输入搜索的内容：<input type="search" placeholder="搜索框"><input type="submit" value="提交"><br>请输入邮件：<input type="email" placeholder="邮件框"><input type="submit" value="提交"><br>请选择日期：<input type="date" placeholder="日期框"><input type="submit" value="提交"><br>请选择日期时间：<input type="datetime-local" placeholder="本地时间框"><input type="submit" value="提交"><br>请选择时区：<input type="datetime" placeholder="世界时区框"><input type="submit" value="提交"><br>请选择颜色：<input type="color" placeholder="颜色框"><input type="submit" value="提交"><br>请输入数字：<input type="number" placeholder="数字框"><input type="submit" value="提交"><br>请输入电话：<input type="tel" placeholder="电话框"><input type="submit" value="提交"><br>请输入地址：<input type="url" placeholder="地址框"><input type="submit" value="提交"><br>滑动条：<input type="range" placeholder="滑动条"><input type="submit" value="提交"><br>请选择星期：<input type="week" placeholder="星期框"><input type="submit" value="提交"><br>请选择月份：<input type="month" placeholder="月份框"><input type="submit" value="提交"><br>请选择时间：<input type="time" placeholder="时间框"><input type="submit" value="提交"><br><!--html5input类型新属性值end--></form>

四、结果显示

PS：

!--input控件新增表单元素output,该元素必须结合form标签使用--><form oninput="x.value=a.value">选择一个数字:<input type="range" name="a" value="0"><output name="x">0</output></form>

结果显示：

<!--input控件新增表单元素datalist--><form action="success.html">文本：<input type="text" list="list" placeholder="请输入文字"><datalist id="list"><option value="重工黑大帅1"></option><option value="重工黑大帅2"></option><option value="重工黑大帅3"></option><option value="重工黑大帅4"></option><option value="重工黑大帅5"></option></datalist></form>

结果显示：

关注重工黑大帅，学习不迷路