html按钮标签-HTML——你必须学习的表单类的标签

HTML - 表单类的标签

文章目录

1.表单元素-文本框

使用标签创建输入框，使用type属性指定输入元素的类型，使用name属性指定输入元素的名称，可以标记提交到服务器的表单数据。

例子

姓名：<input type="text" name="userName"/>

效果截图

这里type="text"表示普通文本的输入。

2.表单元素-密码框

使用<input>标签创建输入框html按钮标签，使用type属性指定输入元素的类型为密码框，输入框的值为value属性的值。

例子

密码：<input type="password" name="pwd" value="123456"/>

效果截图

可以发现：密码框的值是用点表示的，不会以明文形式显示。

这里type="password"表示密码的输入。

3.表单元素-单选按钮

HTML是什么语言？(单选题)<br>
 <input type="radio" name="question"/>A：高级文本语言<p>
 <input type="radio" name="question"/>B：超文本标记语言<p>
 <input type="radio" name="question"/>C：扩展标记语言<p>
 <input type="radio" name="question"/>D：图形化标记语言

效果截图

type="radio" 表示单选按钮。

同一组单选按钮的name属性值应该相同。

4.表单元素-多选框

兴趣爱好:<br>
<input type="checkbox" name="hobby" />足球  <br>
<input type="checkbox" name="hobby"/>篮球   <br>
<input type="checkbox" name="hobby"/>乒乓球

效果截图

type="checkbox" 表示多选框。

与单选框一样，同一组多选框的name属性值必须相同。

5.表单元素-checked属性

<input type="checkbox" name="hobby" />足球  <br>
<input type="checkbox" name="hobby" checked="checked"/>篮球   <br>
<input type="checkbox" name="hobby"/>乒乓球

效果截图

必须要注意的是

将选择以下三种情况。

<input type="checkbox" name="hobby" checked="checked"/>足球  <br>
<input type="checkbox" name="hobby" checked="false"/>篮球   <br>
<input type="checkbox" name="hobby" checked/>乒乓球

效果如下：

6.表单元素-disabled属性

在选择必修课的时候，很快就会选择热门课程，后面选择课程的朋友就无法选择这门课程了。 如何才能实现这一目标？

这里可以在多选框中添加disabled属性，它会禁用输入元素，其默认值为disabled。

例子：

<input type="checkbox" name="course" disabled="disabled">影视鉴赏<br>
<input type="checkbox" name="course">中国语言文学<br>
<input type="checkbox" name="course">心理学

效果截图

视频欣赏不是一个选择

必须要注意的是：

为了规范书写html按钮标签，一般加上disabled=“disabled”就可以了。

7.表单元素-label标签

点击时实现

<label for="user" name="user">用户：</label>
	<input type="text" id="user" name="user"><p>
<label for="pwd" name="password">密码：</label>
	<input type="password" id="pwd" name="password">

效果截图

<label>标签的作用主要是提高用户体验。 单击 <label> 元素内的文本时，焦点将手动定位到绑定到 <label> 标记的表单元素上。 通俗地说，即使点击文本也可以选择表单元素。

需要注意的是，<label>标签的for属性的值要与对应的form元素的id的值相同。 这会将 <label> 标记绑定到表单元素。

8.表单元素-下拉列表

<select>
	<option>问答</option>
    <option>分享</option>
    <option>招聘</option>
    <option selected="selectedd">客户端测试</option>
</select>

效果截图

selected属性的用法与上面介绍的checked属性相同

9. 表单元素-文本字段

个人描述：<textarea maxlength="10"></textarea>

效果截图

如何添加宽度和高度？ 用标签包裹起来，并在里面填写样式。

<style>
textarea{
  width:160px; 
  height:100px;
}
</style>
个人描述：<textarea maxlength="10"></textarea>

10.表单元素-提交按钮

<label for="user">用户：</label><input type="text" id="user" name="user"/><br>
    <label for="pwd">密码：</label><input type="password" id="pwd" name="password" style="margin-bottom: 10px;"/><br>
    <input type="submit" value="提交按钮"/>

效果截图：