跳到主要内容

按钮与文件控件

input 有哪几种按钮类型？​

type行为
submit提交表单; 不写 type 时的默认按钮类型
reset把所有表单控件恢复为默认值; 不推荐使用
button无默认行为, 供脚本绑定, 用于构建自定义按钮
<input type="submit" value="This is a submit button" />
<input type="reset" value="This is a reset button" />
<input type="button" value="This is an anonymous button" />

按钮上的文字写在哪里？​

  • input 按钮: 文字只能通过 value 属性给出, 只能放纯文本;
  • button 元素: 文字写在开闭标签之间, 可嵌套其他标签;
<input type="submit" value="This is a submit button" />
<button type="submit">This is a <strong>submit button</strong></button>

button 元素与 input 按钮如何选择？​

类型button 写法input 写法
submit<button type="submit">Send</button><input type="submit" value="Send" />
reset<button type="reset">Reset</button><input type="reset" value="Reset" />
button<button type="button">Go</button><input type="button" value="Go" />
  • 相同点: 属性与点击行为一致;
  • 差异: button 可嵌套其他标签, input 只能纯文本;
  • 建议: 优先用 button, CSS 支持更好;

image 类型按钮如何渲染？​

  • 形态: 像 img 一样渲染按钮;
  • src: 图片地址; alt: 图片描述;
  • 行为: 点击即提交表单;
<input type="image" alt="Click me!" src="/src/image/open_gms.png" width="80" height="30" />

file 控件如何上传文件？​

  • 语义: 把文件作为表单数据发送到服务器;
  • accept: 限定可选的文件类型;
  • multiple: 允许一次选择多个文件;
<input type="file" name="file" id="file" accept="image/*" multiple />