<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单</title>
</head>
<body>
<!--
form表单容器 用来收集用户信息,传给其他页面进行处理
action 要传的页面
-->
<form action="./13-服务器接收数据.html">
<p>普通的输入框</p>
<!--
input 表单元素,同行显示,可以设置宽高,是一个行内块元素
placeholder:文本框提示内容
password:密码
value :默认值
readonly只读,readonly="true"可以写成readonly
disabled:禁用
type的类型
--text:文本输入框
--password :密码输入款
--radio 单选框 name值相同,可以实现单选
checkbox 复选框
submit:提交按钮
reset:重置按钮
button:普通按钮
file:上传文件
-->
请输入用户名:<input type="text" name="name" placeholder="请输入用户名" value="李四" readonly="true"><br />
密码: <input type="password" name="password" placeholder="请输入密码" value="123456" disabled="true" >
<p>lable绑定的input(提升用户体验)</p>
<label for="a">银行卡号:</label> <input type="text" name="bank" id="a"><br />
<label for="b">银行密码:</label> <input type="password" name="bankpass" id="b"><br />
<!-- 聚焦/失去焦点 -->
<p>单选框radio</p>
<input type="radio" name="sex" id="sex1" checked> <label for="sex1">男</label>
<input type="radio" name="sex" id="sex2"><label for="sex2">女</label>
<p>复选框checkbox</p>
<input type="checkbox" name="" id="s1"><label for="s1">唱</label>
<input type="checkbox" name="" id="s2" disabled><label for="s2">跳</label>
<input type="checkbox" name="" disabled>rap
<input type="checkbox" name="">打篮球
<p>提交按钮submit</p>
<input type="submit" name="" >
<p>重置按钮reset</p>
<input type="reset" name="">
<p>按钮button</p>
<input type="button" name="" value="按钮" onclick="alert('别点我,很烦!')">
<p>下拉框select</p>
<select>
<option>男</option>
<option>女</option>
<option>未知</option>
</select>
<select>
<optgroup label="身高">
<option>高</option>
<option>矮</option>
</optgroup>
<optgroup label="身材">
<option>胖</option>
<option>瘦</option>
</optgroup>
</select>
<p>文本域</p>
<!-- 文本域 cols:"宽度"; rows:"高";文本域里的文字能够自动换行,当文字过多时会产生进度条 -->
<textarea cols="20px" rows="5px"></textarea>
<p>input 剩余属性 image file hidden</p>
<!-- image将图片作为提交按钮,两个额外的数据点x,y -->
<input type="image" name="" src="./image/002.webp" width="150px">
<input type="file" name="">
<input type="file" name="" disabled>
<!-- 隐藏字段 -->
<input type="hidden" name="">
</form>
</body>
</html>
Sublim编写html中的表单,用户名密码,单选,复选,提交按钮等
最新推荐文章于 2023-06-07 19:59:09 发布
本文介绍了HTML中的表单元素,包括input的不同类型如text、password、radio、checkbox等,以及form标签的action属性用于传递用户信息。还提到了lable元素用于提升用户体验,以及submit、reset按钮的功能。此外,文章还涵盖了select下拉框、textarea文本域和hidden隐藏字段的使用。
摘要由CSDN通过智能技术生成