html表单标签
【摘要】 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 2.3.1表单标签 -->
使用表单目的是为了收集用户信息 在HTML中，一个完整的表单通常由表单域，表单控件(也称表单元素)和提示信息3个部分组成
<!-- 2.2.2表单域 -->
在HTML标签中，
<form>标签用于定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
<!-- 2.3.4表单控件 -->
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件 1.input输入表单元素 2.select下拉表单元素 3.textarea文本域元素
<!-- 在input标签中，包含一个type属性，更具不同的type属性值，输入字段拥有很多种形式(可以是文本字段，复选框，掩码后的文本控件，单选按钮，按钮等) -->
<input type="属性值" /><br />
<form action="xxx.php" method="get">
<!-- text 文本框 用户可以里面输入任何文字 -->
用户名:<input type="text" name="username" value="请输入用户名" maxlength="6">
<br /> 密码:<input type="password" name="pwd">
<br />性别:男<input type="radio" name="sex" value="男" checked="checked">女<input type="radio" name="sex" value="女">
<br />爱好 吃饭<input type="checkbox" name="hobby" value="吃饭">睡觉<input type="checkbox" name="hobby" value="睡觉"> 打篮球<input type="checkbox" name="hobby" value="打篮球">
<!-- 点击了提交按钮，可以把 表单域form 里面的表单元素里面的值提交给后台服务器 -->
<br><input type="submit" value="免费注册">
<!-- 重置按钮可以还原表单元素初始默认状态，重置内容 -->
<input type="reset" value="重新设置">
<!-- 普通按钮button 后期配合js搭配使用-->
<input type="button" value="获取验证码">
<!-- file 文件域 使用场景 上传文件使用的 -->
上传头像<input type="file">
<br>
<table align="center">
<tr>
<th><img src="typesuxing.png"></th>
</tr>
</table>
<br />
<table align="center">
<tr>
<th>除type属性外，input标签还有其他很多属性，其常用属性如下</th>
</tr>
</table>
<table align="center" width="500" height="249" border="1" cellspancing="0" cellpadding="0">
<tr>
<th>属性</th>
<th>属性值</th>
<th>描述</th>
</tr>
<tr>
<td>name</td>
<td>由用户自定义</td>
<td>定义input元素的名称</td>
</tr>
<tr>
<td>value</td>
<td>由用户自定义</td>
<td>规定input元素的值</td>
</tr>
<tr>
<td>checked</td>
<td>checked</td>
<td>规定input元素首次加载时应当被选中</td>
</tr>
<tr>
<td>maxlength</td>
<td>正整数</td>
<td>规定输入字段中的字符的最大长度</td>
</tr>
</table>
</form>
<!-- 下拉表单 select就是为了节省空间增强用户体验 -->
信息<select>
<option>姓名</option>
<option selected="selected">班级</option>
</select>
<br> select中至少包含一对选项 在option中定义selected时，当前即为默认选中项
<!-- textarea 表单元素 当用户需要输入内容较多的情况之下，就不能使用文本框，需要使用这个了 -->
<form>
今日反馈<textarea cols="30" rows="10">这里有我想对她说的话</textarea>
</form>
<br> 1.通过textarea标签可以轻松的创建多行文本输入框
<br> 2.cols=每行中的字符数 rows=显示的行数 ，我们实际的开发中不会使用，都是使用css来改变大小
<br>
<!-- lable标签 -->
<!-- lable 标签为input元素定义标签 本身不属于表单单经常与表单搭配使用-->
<!-- lable标签用于绑定一个表单元素，当点击lable标签内的文本时，
浏览器就会自动将光标转到或者选择对应的表单元素上用来增强用户体验 -->
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
<!-- 核心:lable 标签的for属性应当与相关元素的id属性相同 -->
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）