当前位置: html教程 > 03-表单标签 > 阅读正文

input标签

2021.5.21.   495 次   1135字

语法介绍

input标签通常用于输入内容, 它本身是一个输入框

<input 属性名="属性值"... />

你可以不设置属性, 它默认是 type = text

用法

下面input的介绍常用用法

1.设置标签的预定义值

我们需要用到 input 框的 html5 的 placeholder 属性, 比如设置”请输入账号”, “请输入密码”

<input placeholder="这是预定义值" />

2.设置为button

这是一个简化版的button, 用input生成的button没有button强, 但是也可以使用

应该设置它的 value 属性, 否则显示的文本为空

<input type="button" value="我的按钮" />

3.提交表单

通常配合form表单使用, 用于提交数据, 外表像button, 如果是type=button则不能提交数据

默认的value是”提交”, 你可以指定显示的文本内容

<input type="submit" value="登录" />

4.src属性

该属性, 为你单调的input定义一个图像, 让它看起来是一个图型按钮

注意, 必须指定它的 type = image

<input type="image" src="submit.jpg" alt="Submit" align="right" />

5.name属性

该属性在提交表单时, 会成为参数的name, 这样后台获取指定的name就可以得到input中的value

6.value属性

该属性, 默认就是输入框中的内容, 如果不指定, 那么它是空

<input type="text" value="哈哈" />

7.不允许前台修改

readonly=readonly可以设置你的input不允许修改值

<input type="text" value="不能改" readonly="readonly" />

8.require属性

这是 html5 的新属性, 此属性能表示必填字段, 默认是 require = require

比如在 form 输入用户名和密码时, 使用此属就不需要再使用 js 判断,

  <form onsubmit="return goajax()">
    <div class="inputBox">
      <input type="text" name="user" required="required">
      <label>用户名</label>
    </div>
    <div class="inputBox">
      <input type="password" name="pwd" required="required">
      <label>密码</label>
    </div>
    <input type="submit" name="" value="登录">
  </form>

9.文件上传

文件上传使用 input, 属性使用 file

<input type="file" />

本篇完,还有疑问?

加入QQ交流群:11500065636 IT 技术交流群