HTML——表单类的标签
文章目录
1.表单元素——文本框
使用<input>
标签来创建一个输入框,使用type属性
来指定input元素的类型,使用name属性
来规定input元素的名称,它可以对提交到服务器后的表单数据进行标识。
举例
姓名:<input type="text" name="userName"/>
效果截图
这里type="text"
,表示普通文本的输入。
2.表单元素——密码框
使用< input >标签来创建一个输入框,使用type属性
来指定input元素的类型为密码框,其输入框的值为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"/>乒乓球
效果截图
需要注意的是
- 只要有checked属性就会被默认选中,不管它的值是什么;
- 不想被默认选中,不添加checked属性就可以了。
下面这三种情况都会被选中。
<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
属性即可,它会禁用该input元素,其默认值为disabled。
举例:
<input type="checkbox" name="course" disabled="disabled">影视鉴赏<br>
<input type="checkbox" name="course">中国语言文学<br>
<input type="checkbox" name="course">心理学
效果截图
影视鉴赏是不能选的
需要注意的是:
- 只要有
disabled属性
就会被禁用,不管它的值是什么; - 不想被禁用,不添加disabled属性就可以了。
为了规范书写,一般添加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属性的值要和相应表单元素的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="提交按钮"/>
效果截图:
文章推荐
HTML——表单元素的综合案例
要么努力,要么放弃。