一、表单的基本结构
1.表单的基本语法
* <form method="post" action="result.html">
<p> 名字:<input name="name" type="text" > </p>
<p> 密码:<input name="pass" type="password" > </p>
<p> <input type="submit" name="Button" value="提交"/> <input type="reset" name="Reset" value="重填“/> </p>
</form>*
2.表单元素格式
3.表单单选按钮
基本语法
<form action="#" >
<input type="radio" name="radio" id="" value="885"/>885<br/>
<input type="radio" name="radio" id="" value="897"/>897<br/>
<input type="radio" name="radio" id="" value="101.1"/>101.1<br/>
<input type="radio" name="radio" id="" value="97.5"/>97.5<br/>
<input type="submit" />
name要填一样才能实现单选的功能
4.表单复选框
<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏`
5.下拉列表框
select为声明列表框,selected为默认选中项,value为选项中的值
教师 学员 工人 律师 法师
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201225171041237.png)6.按钮
基本语法:
<input type="reset" name="butReset" value="reset按钮"> //重置按钮 value值就是按钮上显示的值
<input type="button" name="butButton" value="button按钮"/>// 普通按钮
7.多行文本域、文件域、邮箱、网址、数字、滑块、搜索框
多行文本域:
<textarea name="showText" cols="x" rows="y">文本内容 </textarea >//显示的行数x、显示的列数y
文件域:
<form action="" method="post" enctype="multipart/form-data">
<p><input type="file" name="files" />
<input type="submit" name="upload" value="上传" /></p>
</form>//file表示文件域
邮箱:
<p>邮箱:<input type="email" name="email"/></p>
<input type="submit"/>//会自动验证邮箱的格式是否正确
网址:
<p>请输入你的网址:<input type="url" name="userUrl"/></p>
<input type="submit"/>//“url”表示要插入的网址
数字:
<p>请输入数字:<input type="number" name="num" min="0" max="100" step="10"/></p>
<input type="submit"/>//“min”允许的数字最小值 "允许的狮子最大值" step"合法的数字间隔
滑块:
<p>请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/></p>
<input type="submit"/>//注释同上
搜索框:
<p>请输入搜索的关键词:<input type="search" name="sousuo"/></p>
<input type="submit"/>