表单学习总结★★★★★

表单学习总体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--1.表单form
action : 表单提交的位置，可以是一个网站，也可以是一个请求处理地址
method : 提交方式，分为post和get两种
        get方式提交 : 可以在url中看到提交的信息。例如密码框输入的密码就直接显示了，不安全但是高效
        post : 比较安全，传输大文件
    2.文本输入框input
name : 文本框名称
value : 默认初始值
maxlength : 输入字符长度最大值
size : 文本框长度
    type : 文本框类型，默认为txt
-->
<form method="set" action="1.我的第一个网页.html">
    <p>用户名称 <input name="username" type="text"  maxlength="8" size="30" placeholder="请输入用户名"> </p>
    <p>密码 <input name="pass" type="password" value="123456" readonly> </p>

<!--单选框标签 type=radio
value：单选框的值
name：表示组，有相同name的单选框为一个组，同一个组内的单选框只能选一个
默认选中为checked
-->
    <p>性别 :
    <input type="radio" value="boy" name="sex" checked disabled/>男
    <input type="radio" value="girl" name="sex" hidden/>女
    </p>


<!--多选框标签
同样需要命名来分组
默认选中哪个就在哪个加checked
-->
<p>爱好:
    <input type="checkbox" value="sleep" name="hobby"/>睡觉
    <input type="checkbox" value="eat" name="hobby" checked/>吃饭
    <input type="checkbox" value="play games" name="hobby"/>打游戏
</p>

<!--按钮标签
1.普通按钮:button
2.图片按钮:image
图片按钮的功能和提交按钮一样，会跳转到form表单标签设置的action网址
-->
<p>
    按钮: <input type="button" name="btn1" value="按钮1"/> <br>
    图片按钮： <br>
    <input type="image" name="btn2" src="/com/xy/HTML/resource/image/1.jpg" width="200" height="100"> <br>

</p>

<!--下拉框，列表框
默认选中为selected
-->
<p>国家 :
    <select name="列表名称" >
        <option value="USA" >美国</option>
        <option value="China" selected>中国</option>
        <option value="Russia">俄罗斯</option>
        <option value="India">印度</option>
    </select>
</p>

<!--文本域
cols="50" rows="10"  文本域大小，可以拉动文本域进行调节
-->
<p> 反馈 : <br>
    <textarea name="textarea"  cols="50" rows="10"></textarea>
</p>

<!--文件域 input type="file"
用来选择本地文件
-->
<p>
    <input type="file" name="files"/>
    <input type="button" value="上传文件" name="upload"/>
</p>

<!--验证功能框
1.邮件验证 input type="email"
2.URL验证 url
3.数字验证 number
max : 最大输入
min : 最小输入
step : 跨度
4.滑块 range
例如用滑块调整音量,要设置step和min max
5.搜索框 search
-->
<p>邮箱验证 :
    <input type="email" name="email" />
</p>
<p>URL验证 :
    <input type="url" name="url"/>
</p>
<p>数字验证 :
    <input type="number" name="number" max="100" min="10" step="10"/>
</p>
<p>音量滑块 :
    <input type="range" name="voice" min="0" max="100" step="0.5"/>
</p>
<p>搜索框 :
    <input type="search" name="search" id="mark"/>
</p>

<!--增强鼠标可用性 label+tab
-->
    <p>
        <label for="mark">点击跳转到指定id文本框</label>
    </p>

<!--初级验证标签
placeholder : 提示信息
required : 非空判断
pattern : 正则表达式,查常用正则表达式速查表 https://www.jb51.net/tools/regexsc.htm
-->
    <p>提示信息测试 : <input type="text" name="test" placeholder="请输入任意内容"/></p>
    <p>非空判断测试 : <input type="text" name="!null" required=/> </p>
    <p>正则表达式测试（是否为中国大陆号码） : <input type="text" name="myemail" pattern="(\d{4}-|\d{3}-)?(\d{8}|\d{7})"/></p>

<!--3.提交和重置按钮
点击提交按钮会跳转到form表单设置的action网址
点击重置按钮会清空表单-->
    <p>提交和重置按钮 ：
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重置"/>
    </p>
</form>

</body>
</html>

生成页面填写具体内容后如下图

之前我们说过，将表单提交方式设置为set，可以在跳转action的url中看到所有提交的表单信息，信息如下

http://localhost:63342/Day02/com/xy/HTML/Base/1.我的第一个网页.html?

username=无关风月7707

&pass=123456

&hobby=sleep

&列表名称=China

&textarea=反馈内容

&files=索隆.jpg

&email=xxxxxxx%40qq.com

&url=https%3A%2F%2Fwww.baidu.com

&number=20

&voice=63.5

&search=轩辕剑

&test=无关风月7707

&!null=www

&myemail=87483500

&Button=提交
对比后发现很明显和填写内容保持一致