表单post和get提交
form
action 表单提交的位置,可以是网站,也可以是一个请求处理地址
method:post /get 提交方式
input 文本输入框 input type = text 名字
input type = password 密码
input = submit
input = reset
get和post的区别
get方式提交:我们可以在url中看到提交的信息,不安全,但是高效
post方式提交:比较安全,传输大文件
<form action="1.我的第一个网页.html" method="post">
<h1> 登陆 </h1>
<p>账号<input type="text" name="account"></p>
<p>密码<input type="password" name = "psd"> </p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
其他各种元素属性
value 框内默认初始值
maxlength 最长能写几个字符
size 文本框长度
其他type属性
单选框radio
单选框 。 必须写value ,name。
value表示单选框的值
name用来分组 同组只能选一个,所以为单选
checked 默认选中初始值
<p>性别:
<input type="radio" value="boy"name="sex"/>男
<input type="radio" value="girl"name="sex"/>女
</p>
多选框 checkbox
value
checked 默认选中初始值
name 选组 同一个组会被整合到同一个数组中
<p>爱好
<input type="checkbox"value="sleep"name="hobby">睡觉
<input type="checkbox"value="chat"name="hobby">聊天
<input type="checkbox"value="game"name="hobby"checked>游戏
<input type="checkbox"value="eat"name="hobby">吃饭
</p>
按钮 button
value表示要在按钮框中显示的内容
image和submit效果一样 点击之后会提交表单
submit 提交按钮
reset 全部重置,清空表单
<p>按钮:
<input type="button"name="btn"value="点击变长">
<input type="image"src="../resources/image/1.jpg">
</p>
<p>
<input type="submit"value="提交">
<input type="reset"value="清空表单">
</p>
表单中的其他标签 非input
下拉框 列表框 select option
selected 表示默认初始选项
<p>国家
<select name="country">
<option value="china">中国</option>
<option value="jp"selected>日本</option>
<option value="usa">美国</option>
<option value="uk">英国</option>
</select>
</p>
文本域 textarea
需要提交里面的值 都需要name属性
cols表示列
rows表示列
<p>反馈
<textarea name="textarea" cols="30" rows="10">意见反馈</textarea>
</p>
文件域 type=file
<p>选择文件
<input type="file"name="filename">
<input type="button"name="btn"value="上传">
</p>
功能标签
自带验证功能的标签
邮件验证type=email
<p>邮箱:
<input type="email"name="email">
</p>
如果输入的内容没有@ 或者@后面没有内容 会无法提交
URL验证 type =url
<p>URL:
<input type="url"name="url">
</p>
数字验证 type=number
<p>商品数量:
<input type="number"name="num"max="99"min="1"step="1">
</p>
max min 最大最小值
step 步长 上下箭头控制每次增加多少
滑块 type=range
<p>音量
0<input type="range"name="volume"max="100"min="0">100
</p>
搜索 type = search
<p>搜索
<input type="search"name="search">
</p>
搜索框最后有个删除,可以删除框内内容