67.【HTML 5】(三)

简介: 67.【HTML 5】

13.文本框和单选框

文本款必写:
<input type="radio" value="box" name="sex"/>

单选框标签 
 type:
 value: 值
 name: 组名
    <p>性别: 男<input type="radio" value="box" name="sex"/>
         女<input type="radio" value="girl" name="sex"/>
    </p>

14.按钮和多选框

必写:
1.多选框
type value name
2.单选框标签
 type:  value: 值  name: 组名
3.按钮:
type value name
4.图片按钮  (具有提交地功能)
type  src
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--
<form>
action :表单提交地位置,可以是网站,也可以是一个请求处理地位
method : post|get 提交方式
get方式提交: 我们可以再url中,看到我们提交地信息,不安全,能够看到账号和密码
pos方式提交: 我们看不到密码和账号,比较安全。
`
2.<input>
type : 文本框类型
name : 组名
value : 默认值
maxlenth: 最多输入多少个字符
size : 文本框长度
-->
<h1>注册窗口</h1>
<form action="1.我的第一个网页.html" method="post">
<!--文本输入框-->
<p>名字: <input type="text" name="Username" value="请输入您地账号" maxlength="8" size="30"></p>
<p>密码: <input type="password" name="Passworld"></p>
<!-- 单选框标签
 type:
 value: 值
 name: 组名
 -->
    <p>性别: 男<input type="radio" value="box" name="sex"/>
         女<input type="radio" value="girl" name="sex"/>
    </p>
<!--    多选框
type value name
-->
    <p>爱好:
        睡觉:<input type="checkbox" value="sleep" name="hobby">
        游戏:<input type="checkbox" value="playGrame" name="hobby">
        学习:<input type="checkbox" value="learn" name="hobby">
        吃饭:<input type="checkbox" value="eat" name="hobby">
    </p>
<!--    按钮
button 普通按钮
image 图片按钮
submit 提交按钮
reset 重置按钮
-->
    <p>按钮:
        <input type="button" name="but1" value="默认值">
<!--        图片按钮有自动提交地功能     -->
        <input type="image" src="../resources/imag/3.jpg">
    </p>
<p>
  <input type="submit" name="提交">
  <input type="reset" name="重置">
</p>
</form>
</body>
</html>

15.列表框和文本域和文件域

1.下拉框:
<select name="列表名称" id="">
            <option value="选填">China</option>
            <option value="选填">America</option>
            <option value="选填" selected>Jpane</option>
            <option value="选填">India</option>
</select>
2.文本域
<p>反馈</p>
    <p>
    <textarea name="textarea" id="" cols="30" rows="10"></textarea>
</p>
3.文件域
<p>
    <input type="file" name="files">
</p>

16.搜索框和滑块和简单验证

1.简单验证:
<!--    邮件验证-->
    邮箱:
    <input type="email" name="email">
<!--    -->
    <p>
        数字:
        <input type="number" name="number" max="100" min="0" step="1">
    </p>
2.滑动块
    <p>
        <input type="range" name="voice" min="0" max="100">
    </p>
3.搜索框:
 <p>搜索:
        <input type="search" name="seach" >
</p>

17.只读

readonly  只读
disabled  禁用
value 默认值
hidden 隐藏

18.表单的应用(增强鼠标地可用性)

for=""  ----->指向id 地值  
id=""  ------->自定义
    <p>
        <label for="mark">你点击我试试看 </label>
        <input type="text" id="mark">
    </p>

19.表单地初级验证

placeholder  提示信息 (文本框常用)
required  不能为空(文本框常用)
pattern  (正则表达式)
eg:
pattern=" "
相关文章
|
移动开发 HTML5
|
1月前
|
移动开发 UED HTML5
HTML53
HTML5表单引入了新表单元素、新属性、新输入类型及自动验证功能,提升了用户体验和开发效率。同时,HTML5移除了如 `&lt;acronym&gt;`、`&lt;applet&gt;` 等多个HTML 4.01中的元素,简化了网页结构。
|
5月前
HTML4(二)(下)
HTML4(二)(下)
28 0
|
5月前
|
数据采集 搜索推荐
HTML4(四)
HTML4(四)
30 0
|
7月前
|
前端开发 JavaScript
html怎么学
【4月更文挑战第21天】html怎么学
28 3
|
7月前
|
存储 移动开发 API
HTML5
HTML5
42 0
|
7月前
|
前端开发 程序员 开发者
8个你可能不知道的令人震惊的 HTML 技巧
8个你可能不知道的令人震惊的 HTML 技巧
|
移动开发 UED HTML5
HTML实用小技巧🚀🚀
HTML实用小技巧🚀🚀
|
前端开发 JavaScript 数据安全/隐私保护
HTML详解连载(3)
HTML详解连载(3)
|
前端开发 JavaScript Java
HTML 简单介绍
HTML 简单介绍
HTML 简单介绍