html表单基础

表单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>

搜索框最后有个删除，可以删除框内内容