67,944
社区成员
发帖
与我相关
我的任务
分享学习HTML制作表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post,get 提交方式
get方式可以在url中看到账号密码，提交不安全，但是高效
post提交相对安全，可以提交大文件
-->
<!--<form action="HTML.html" method="get">-->
<!--<form action="" method="post">
<!–文本输入框：input type="text"–>
<p>名字: <input type="text" name="username"> </p>
<!–密码框：input type="password"–>
<p>密码: <input type="password" name="pwd"> </p>
<p>
<input type="submit"><!–提交–>
<input type="reset"><!–重置–>
</p>
value="请输入名字":默认初始值
maxlength="4" ：最多能输入多少个字符
size="10"：文本框长度
</form>-->
<form action="test.html" method="get">
<!--文本输入框：input type="text"，hidden:隐藏-->
<p>名字: <input type="text" name="username" hidden> </p>
<!--表单初级验证1.placeholder：提示信息 2.required:不能为空-->
<p>账号：<input type="text" name="id" placeholder="请输入数字账号" required></p>
<!--密码框：input type="password"，readonly：只能读不能写-->
<p>密码: <input type="password" name="pwd" value="现在只能读不能写" readonly></p>
<!--单选框标签：input type="radio"，value=""：单选框的值，name=""：表示组-->
<p>性别：
<input type="radio" value="boy" name="sex" required>男
<input type="radio" value="girl" name="sex" required>女
</p>
<!--
input type="checkbox":多选框标签
checked:默认选中
-->
<p>爱好：
<input type="checkbox" value="sleep" name="like" checked >睡觉
<input type="checkbox" value="sing" name="like" >唱歌
<input type="checkbox" value="playGames" name="like" >打游戏
</p>
<!--input type="button"：普通按钮
input type="image"：图片按钮(点击提交到表单提交的位置)
-->
<p>按钮：
<input type="button" name="dd" value="点击这里">
<input type="image" src="../img\0e275a4acf15273bab2eb6db2939a300_482x264.jpg" width="100px" height="50px" >
</p>
<!--1.下拉框，列表框:select 2.selected:默认选中-->
<p>国家：
<select name="列表名称" >
<option value="china" >中国</option>
<option value="india">印度</option>
<option value="usa" selected>美国</option>
</select>
</p>
<!--1.文本域:textarea 2.name:里面填英文，避免乱码问题-->
<p>反馈：
<textarea name="textarea" cols="30" rows="10" placeholder="请输入您的宝贵意见" required></textarea>
</p>
<!--input type="file"：文件域-->
<p>
<input type="file" name="files">
<input type="button" value="点击上传" name="upload">
</p>
<!--pattern：正则表达式-->
<p>邮箱：
<input type="email" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" >
</p>
<p>URL:
<input type="url" name="url" >
</p>
<!--step:一次增加的值-->
<p>数字：
<input type="number" name="number" max="100" min="0" step="10" >
</p>
<!--滑块，调节音量:input type="range"
step="10":每次调节的范围
-->
<p>音量：
<input type="range" name="voice" min="0" max="100" step="10">
</p>
<p>搜索框：
<input type="search" id="dd" name="search">
</p>
<p>
<!--label:增强鼠标的可用性-->
<label for="dd">点击我会调到id=""标记的文本框</label>
</p>
<p>
<br>
<input type="submit"><!--提交-->
<input type="reset"><!--重置-->
<!--input type="reset"：清空表单属性
value=""：可以给表单赋值，相当于给个表单名字
disabled:禁用该按钮
-->
<input type="reset" value="清空表单" disabled>
</p>
<!--表单初级验证1.placeholder：提示信息 2.required:不能为空 3.pattern：正则表达式-->
</form>
</body>
</html>
...全文
请发表友善的回复…
发表回复
WeiComp 新手村气氛调节师 2021-11-24
- 打赏
- 举报
这么常的代码
666！！！
