10.24

1.<!-- input标签 type="text"为输入框 -->

2.<!-- placeholder 占位符 -->

3.<!-- button是按钮 -->

4.<!-- input type="radio",表示单选框,设置同样的name属性,使其成为一组 -->

5.<!-- input type="checkbox"时,显示为复选框 -->

6.<!-- textarea为文本域 -->

7.<!-- form为表单,表单里的数据全部提交给服务器 -->

8.显式关联是通过label标签的for属性,显式与另一个表单控件关联。需要注意的是,

   for属性的值必须是与label标签在同一文档中的可标记表单元素的id,注意是id而不是name。

8.的例子:

<label for="pass">密码:</label>
<input type="password"  name="pass" id="pass" value="" > 

注意:label标签 
    label标签为input元素定义标注(标记),它不会向用户呈现任何特殊效果,
    为了实现点击文字也能选中/取消checkbox或radio。


    常用于与checkbox(复选框)或radio(单选框)关联,

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的表单元素</title>
</head>
<body>

<h1>登录</h1>
<hr>
<!-- input标签 type="text"为输入框 -->
<!-- placeholder 占位符 -->
<input type="text" placeholder="帐号">
<br><br>
<input type="password" placeholder="密码">
<br><br>
<!-- button是按钮 -->
<button>提交</button>
<!-- **************************************************************** -->
<!-- input type="radio",表示单选框,设置同样的name属性,使其成为一组 -->
<br><br><hr>
<input type="radio" id="man" name="sex">
<label for="man">男</label>
<input type="radio" id="woman" name="sex">
<label for="woman">女</label>
<!-- **************************************************************** -->
<br><br><hr>
<input type="button">
<label for="text">姓名:</label>
<input type="text" placeholder="姓名">
<!-- **************************************************************** -->
<br><hr>
<!-- input type="checkbox"时,显示为复选框 -->
<input type="checkbox" id="movie">
<label for="movie">电影</label>
<!-- **************************************************************** -->
<br><hr>
<!-- textarea为文本域 -->
<textarea ></textarea>

<!-- **************************************************************** -->
<br><br><hr>
<div>
<!-- form为表单,表单里的数据全部提交给服务器 -->
<form action="">
<input type="text" placeholder="帐号">
<br><br>
<input type="password" placeholder="密码">
<br><br>
<button type="submit">submit</button>
</form>
</div>
</body>
</html>

posted @ 2020-10-24 16:28  王昊宁  阅读(87)  评论(0编辑  收藏  举报