输入类型文本点击按钮 - HTML

在网页开发中，我们经常需要在网页上设置一些输入框，这些输入框可以让用户输入各种类型的数据，如文本、数字、日期等。在这些输入框旁边，经常会有一个“提交”或“发送”按钮，让用户点击后把输入的内容提交到服务器或执行一些其他操作。

在HTML中，我们可以使用input标签来定义这些输入框，使用button标签来定义按钮。

input标签

input标签有很多类型，包括文本框、密码框、单选框、复选框、日期选择框等。其中，type属性用于指定输入框的类型。

文本框

文本框是最常见的输入框之一，它允许用户输入任意文本。以下是一个例子：

<input type="text" name="username">

在这个例子中，我们使用type属性指定输入框类型为text，name属性指定输入框的名称。

密码框

密码框与文本框类似，但是输入的内容会被隐藏。以下是一个例子：

<input type="password" name="password">

在这个例子中，我们使用type属性指定输入框类型为password，name属性指定输入框的名称。

单选框

单选框通常用于让用户在几个选项中选择一个。以下是一个例子：

<label>
  <input type="radio" name="gender" value="male">男
</label>
<label>
  <input type="radio" name="gender" value="female">女
</label>

在这个例子中，我们使用type属性指定输入框类型为radio，name属性指定输入框的名称，value属性指定输入框的值。

复选框

复选框与单选框类似，但是允许用户选择多个选项。以下是一个例子：

<label>
  <input type="checkbox" name="hobby" value="reading">阅读
</label>
<label>
  <input type="checkbox" name="hobby" value="sports">运动
</label>
<label>
  <input type="checkbox" name="hobby" value="music">音乐
</label>

在这个例子中，我们使用type属性指定输入框类型为checkbox，name属性指定输入框的名称，value属性指定输入框的值。

日期选择框

日期选择框允许用户选择日期。以下是一个例子：

<input type="date" name="birthday">

在这个例子中，我们使用type属性指定输入框类型为date，name属性指定输入框的名称。

button标签

button标签用于定义按钮，可以使用type属性指定按钮的类型。

<button type="submit">提交</button>

在这个例子中，我们使用type属性指定按钮类型为submit。

完整例子

下面是一个包含文本框、密码框、单选框、复选框和按钮的例子：

<form>
  <label>用户名：<input type="text" name="username"></label><br>
  <label>密码：<input type="password" name="password"></label><br>
  <label>性别：
    <label><input type="radio" name="gender" value="male">男</label>
    <label><input type="radio" name="gender" value="female">女</label>
  </label><br>
  <label>爱好：
    <label><input type="checkbox" name="hobby" value="reading">阅读</label>
    <label><input type="checkbox" name="hobby" value="sports">运动</label>
    <label><input type="checkbox" name="hobby" value="music">音乐</label>
  </label><br>
  <button type="submit">提交</button>
</form>

这个例子中，我们使用了

结论

在HTML中，我们可以使用input标签来定义各种类型的输入框，使用button标签来定义按钮。我们还可以使用label标签来关联输入框和描述文字，使得网页更易于阅读和使用。