文章详细介绍了HTML中的form标签及其属性，包括action和method，还有label,input的各种类型如text,password,radio,checkbox等，以及相关属性如value,name,placeholder,disabled,readonly等。此外，还讨论了单选框、复选框的交互，以及textarea和select的使用方法。
目录
form 标签，
表单， 可以用来提交数据 form是一个块标签
action 属性，
数据要提交到的服务器地址，一般是接口地址
method属性
数据的提交方式 他的值有
get post put delete 等
get: get请求可以把数据拼接到接口的url上，缺点是不安全
提交的数据较少
post：post请求，在post提交的数据信息中不会看到提交的
数据结构，相比较get是安全的，并且提交的数据较大。
label 标签，
行标签，常和input 搭配使用，表示input标题
（在表单里最好使用label）
input标签，
行标签，输入框，常用于表单的输入
type属性 用来设置输入框类型
属性值
text 文本输入框
password 密码输入框
button 普通按键
submit 提交按钮
reset 重置按钮
radio 单选框
单选框 同一类型选框他们的name必须相同否则
label 属性用来绑定对于id的input ，列如
<label for="abc">姓名</label>只要对该label操作
则会在当前页面找到 id="abc"的input ，并且选中该input
checkbox 多选框 /复选框
hidden 隐藏框
file 上传文件
number 输入数字
value 属性
设置input的值
name 属性，
对于界面显示没有任何的影响，主要用于数据的交换
实质上name的值即是后天数据的字段名
placeholder属性，
输入框的提示信息
checked 属性
单选框和复选框的默认选中，只需要在input上设置checked 属性即可
disabled 属性
禁用某一个input 标签只需要给input添加disabled 属性即可
readonly属性
给某一个输入框添加只读属性readonly，确保该输入框内容可以
通过程序修改，并且能提交到后台
disabled 和readonly的异同：
他们都不能手动修改
不同的是disabled 它里面的值不能提交的使用，readonly
的值可以提交到后台
placeholder属性，输入框的提示信息
maxlength属性，
输入字符的最大长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form表单</title>
<style>
*{
margin: 0;
padding: 0;
}
form{
border: 1px #f00 solid;
padding: 20px;
}
</style>
</head>
<body>
<!--
form 标签，表单， 可以用来提交数据
form是一个块标签
action 属性，数据要提交到的服务器地址，一般是接口地址
method属性 数据的提交方式
他的值有
get post put delete 等
get: get请求可以把数据拼接到接口的url上，缺点是不安全
提交的数据较少
post：post请求，在post提交的数据信息中不会看到提交的
数据结构，相比较get是安全的，并且提交的数据较大。
label 标签，行标签，常和input 搭配使用，表示input标题
（在表单里最好使用label）
input标签，行标签，输入框，常用于表单的输入
type属性 用来设置输入框类型
属性值
text 文本输入框
password 密码输入框
button 普通按键
submit 提交按钮
reset 重置按钮
radio 单选框
checkbox 多选框 /复选框
hidden 隐藏框
value 属性 设置input的值
name 属性，对于界面显示没有任何的影响，主要用于数据的交换
实质上name的值即是后天数据的字段名
placeholder属性，输入框的提升信息
单选框和复选框的默认选中，只需要在input上设置checked 属性即可
禁用某一个input 标签只需要给input添加disabled 属性即可
给某一个输入框添加只读属性readonly，确保该输入框内容可以
通过程序修改，并且能提交到后台
disabled 和readonly的异同：他们都不能手动修改
不同的是disabled 它里面的值不能提交的使用，readonly
的值可以提交到后台
placeholder属性，输入框的提示信息
maxlength属性，输入字符的最大长度
-->
<form action="http://www.baidu.com" method="get">
<label>姓名</label>
<input type="text" disabled value="" name="usrname"/> <br/>
<label>密码</label>
<input type="text" value="" placeholder="请输入密码" name="password" maxlength="8"/> <br/>
<!-- 单选框 同一类型选框他们的name必须相同否则
label 属性用来绑定对于id的input ，列如
<label for="abc">姓名</label>只要对该label操作
则会在当前页面找到 id="abc"的input ，并且选中该input
-->
<label for="">性别</label>
<label> <input checked type="radio" name="sex" value="男">男</label>
<label><input type="radio" name="sex" value="女"> 女</label>
<br>
<label for="">对象</label>
<input checked id="lv" type="radio" name="love" value="卢布"><label for="lv">卢布</label>
<input id="rouyu" type="radio" name="love" value="邹瑜"><label for="rouyu">邹瑜</label>
<br>
<label>中午吃啥</label>
<label><input type="checkbox" value="重庆小面">重庆小面</label>
<label><input type="checkbox" value="套餐">套餐</label>
<label><input type="checkbox" value="拉面">拉面</label>
<label><input disabled type="checkbox" value="掉渣饼">掉渣饼</label>
<label><input checked type="checkbox" value="老母鸡汤">老母鸡汤</label> <br>
<label > 出生日期</label>
<input type="text" readonly value="2000-04-01">
<br>
<!-- 隐藏 -->
<input type="hidden" value="真爱网"/>
<label >输入昵称</label>
<input type="text" value="" placeholder="给自己取一个名字"> <br>
<input type="reset" value="重置按钮" >
<input type="button" value="普通按钮" >
<input type="submit" value="提交"/>
</form>
<button>点击按钮标签</button>
</body>
</htmlinput属性,input虽然是行标签，但是可以设置宽高
minlength最少字符数
required 设置为必填项
select下拉框 ，行标签
他的子级必须是option标签，每一个option标签表示一个选项
option标签具有value属性
设置textarea
通过css的reaize属性，设置 拖拽的方向
horizontal 横向拖拽
vertical 纵向拖拽
both 双向拖拽
none 不拖拽
fieldset 创建一个组
legend 组的标题
textarea 多行文本输入框
属性
rows 设置具有多少行
cols设置具有多少列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form表单标签</title>
<style>
*{
margin: 0;
padding: 0;
}
.txt{
width: 200px;
height: 30px;
border: 1px #ccc solid;
border-radius: 8px;
padding-left: 12px;
}
/* 设置textarea
通过css的reaize属性，设置 拖拽的方向
horizontal 横向拖拽
vertical 纵向拖拽
both 双向拖拽
none 不拖拽
*/
.area{
resize: none;
}
</style>
</head>
<body>
<!--
input属性,input虽然是行标签，但是可以设置宽高
minlength最少字符数
required 设置为必填项
type属性补充
file提交文件
number输入数字
select下拉框 ，行标签
他的子级必须是option标签，每一个option标签表示一个选项
option标签具有value属性
fieldset 创建一个组
legend 组的标题
textarea 多行文本输入框
属性
rows 设置具有多少行
cols设置具有多少列
-->
<form action="###" method="get">
<label for="">用户名</label>
<input type="text" value="" minlength="6" maxlength="8" required placeholder="请输入用户名"/> <br>
<label for="">密码</label>
<input type="password" value="" placeholder="请输入密码"/> <br>
<label for="">性别</label>
<input type="radio" value="女" name="sex">女
<input type="radio" value="男" name="sex">男<br>
<label for="">兴趣爱好</label>
<input type="checkbox" value="排球">排球
<input type="checkbox" value="篮球">篮球
<input type="checkbox" value="足球">足球
<input checked type="checkbox" value="乒乓球">乒乓球
<br>
<label for="">上传头像</label>
<input type="file" value="">
<br>
<label for="">薪资</label>
<input type="number" value="">
<br>
<select>
<option value="1">郑州</option>
<option value="2">哈尔滨</option>
<option value="3">南京</option>
<option value="4">杭州</option>
</select>
<select>
<option value="1">郑州</option>
<option value="2">哈尔滨</option>
<option value="3">南京</option>
<option value="4">杭州</option>
</select>
<select>
<option value="1">郑州</option>
<option value="2">哈尔滨</option>
<option value="3">南京</option>
<option value="4">杭州</option>
</select>
<fieldset>
<legend>学生信息</legend>
<label for="">姓名</label>
<input type="text" value="" class="txt"> <br>
<label for="">年龄</label>
<input type="text" value=""> <br>
</fieldset>
<label for="">输入简介</label>
<textarea class="area" rows="10" cols="50"></textarea>
<br><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
扫一扫
534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
