HTML4(三):表单

简介: HTML4(三):表单

表单

概念:一种包含交互的区域,用于手机用户提供的数据。

1. 基本结构

例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单_基本结构</title>
</head>
<body>
    <form action="https://www.baidu.com/s">
        <input type="text" name="wd">
        <button>去百度搜索</button>
    </form>
    <hr>
    <form action="https://search.jd.com/search" target="_self" method="get">
        <input type="text" name="keyword">
        <button>去京东搜索</button>
    </form>
    <hr>
    <a href="https://search.jd.com/search?keyword=手机">搜索手机</a>
</body>
</html>

2. 常用表单控件

2.1 文本输入框

<input type="text">

2.2 密码输入框

<input type="password">

2.3 单选框

<input type="radio" name="sex" value="female">女
<input type="ratio" name="sex" value="male">男

2.4 复选框

<input type="checkbox" name="hobby" value="smoke">抽样
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

2.5 隐藏域

<input type="hidden" name="tag" value="100">

2.6 提交按钮

<!--方法一-->
<input type="submit" value="点我提交表单">
<!--方法二-->
<button>点我提交表单</button>

2.7 重置按钮

<!--方法一-->
<input type="reset" value="点我重置">
<!--方法二-->
<button type="reset">点我重置</button>

2.8 普通按钮

<!--方法一-->
<input type="button" value="普通按钮">
<!--方法二-->
<button type="button">普通按钮</button>

2.9 文本域

<textarea name="msg" rows="22" cols="3">我是文本域</textarea>

2.10 下拉框

<select name="from">
  <option value="黑">黑龙江</option>
  <option value="辽">辽宁</option>
  <option value="吉">吉林</option>
  <option value="粤" selected>广东</option>
</select>

2.11 示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单_常用控件</title>
</head>
<body>
    <form action="https://search.jd.com/search">
        <!-- 文本输入框 -->
        账户:<input type="text" name="account" value="zhangsan" maxlength="10"><br>
        <!-- 密码输入框 -->
        密码:<input type="password" name="pwd" value="123" maxlength="6"><br>
        <!-- 单选框 -->
        性别:
        <input type="radio" name="gender" value="male">男 
        <input type="radio" name="gender" value="female" checked>女<br>
        <!-- 多选框 -->
        爱好:
        <input type="checkbox" name="hobby" value="smoke" checked>抽烟
        <input type="checkbox" name="hobby" value="drink">喝酒
        <input type="checkbox" name="hobby" value="perm" checked>烫头<br>
        其他:
        <textarea name="other" cols="23" rows="3"></textarea><br>
        籍贯:
        <select name="place">
            <option value="冀">河北</option>
            <option value="鲁">山东</option>
            <option value="晋" selected>山西</option>
            <option value="粤">广东</option>
        </select>
        <!-- 隐藏域 -->
        <input type="hidden" name="from" value="toutiao">
        <br>
        <!-- 确认按钮_第一种写法 -->
        <button type="submit">确认</button>
        <!-- 确认按钮_第二种写法 -->
        <!-- <input type="submit" value="确认"> -->
        <!-- 重置按钮_第一种写法 -->
        <!-- <button type="reset">重置</button> -->
        <!-- 重置按钮_第二种写法 -->
        <input type="reset" value="点我重置">
        <!-- 普通按钮_第一种写法 -->
        <input type="button" value="检测账户是否被注册">
        <!-- 普通按钮_第二种写法 -->
        <!-- <button type="button">检测账户是否被注册</button> -->
    </form>
</body>
</html>

3. 禁用表单控件

例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单_禁用表单控件</title>
</head>
<body>
    <form action="https://search.jd.com/search">
        <!-- 文本输入框 -->
        账户:<input disabled type="text" name="account" value="zhangsan" maxlength="10"><br>
        <!-- 密码输入框 -->
        密码:<input type="password" name="pwd" value="123" maxlength="6"><br>
        <!-- 单选框 -->
        性别:
        <input type="radio" name="gender" value="male">男 
        <input type="radio" name="gender" value="female" checked>女<br>
        <!-- 多选框 -->
        爱好:
        <input type="checkbox" name="hobby" value="smoke" checked>抽烟
        <input type="checkbox" name="hobby" value="drink">喝酒
        <input type="checkbox" name="hobby" value="perm" checked>烫头<br>
        其他:
        <textarea name="other" cols="23" rows="3"></textarea><br>
        籍贯:
        <select name="place">
            <option value="冀">河北</option>
            <option value="鲁">山东</option>
            <option value="晋" selected>山西</option>
            <option value="粤">广东</option>
        </select>
        <!-- 隐藏域 -->
        <input type="hidden" name="from" value="toutiao">
        <br>
        <!-- 确认按钮_第一种写法 -->
        <button type="submit">确认</button>
        <!-- 确认按钮_第二种写法 -->
        <!-- <input type="submit" value="确认"> -->
        <!-- 重置按钮_第一种写法 -->
        <!-- <button type="reset">重置</button> -->
        <!-- 重置按钮_第二种写法 -->
        <input type="reset" value="点我重置">
        <!-- 普通按钮_第一种写法 -->
        <input disabled type="button" value="检测账户是否被注册">
        <!-- 普通按钮_第二种写法 -->
        <!-- <button type="button">检测账户是否被注册</button> -->
    </form>
</body>
</html>

4. lable标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单_label标签</title>
</head>
<body>
    <form action="https://search.jd.com/search">
        <label for="zhanghu">账户:</label>
        <input id="zhanghu" type="text" name="account" maxlength="10"><br>
        <label>
            密码:
            <input id="mima" type="password" name="pwd" maxlength="6">
        </label>
        <br>
        性别:
        <input type="radio" name="gender" value="male" id="nan">
        <label for="nan">男</label> 
        <label>
            <input type="radio" name="gender" value="female" id="nv">女
        </label>
        <br>
        爱好:
        <label>
            <input type="checkbox" name="hobby" value="smoke">抽烟
        </label>
        <label>
            <input type="checkbox" name="hobby" value="drink">喝酒
        </label>
        <label>
            <input type="checkbox" name="hobby" value="perm">烫头
        </label><br>
        <label for="qita">其他:</label>
        <textarea id="qita" name="other" cols="23" rows="3"></textarea><br>
        籍贯:
        <select name="place">
            <option value="冀">河北</option>
            <option value="鲁">山东</option>
            <option value="晋">山西</option>
            <option value="粤">广东</option>
        </select>
        <input type="hidden" name="from" value="toutiao">
        <br>
        <input type="submit" value="确认">
        <input type="reset" value="点我重置">
        <input type="button" value="检测账户是否被注册">
    </form>
</body>
</html>

5. fieldset与legend标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单_fieldset与legend</title>
</head>
<body>
    <form action="https://search.jd.com/search">
        <!-- 主要信息 -->
        <fieldset>
            <legend>主要信息</legend>
            <label for="zhanghu">账户:</label>
            <input id="zhanghu" type="text" name="account" maxlength="10"><br>
            <label>
                密码:
                <input id="mima" type="password" name="pwd" maxlength="6">
            </label>
            <br>
            性别:
            <input type="radio" name="gender" value="male" id="nan">
            <label for="nan">男</label> 
            <label>
                <input type="radio" name="gender" value="female" id="nv">女
            </label>
        </fieldset>
        <br>
        <fieldset>
            <legend>附加信息</legend>
            爱好:
            <label>
                <input type="checkbox" name="hobby" value="smoke">抽烟
            </label>
            <label>
                <input type="checkbox" name="hobby" value="drink">喝酒
            </label>
            <label>
                <input type="checkbox" name="hobby" value="perm">烫头
            </label><br>
            <label for="qita">其他:</label>
            <textarea id="qita" name="other" cols="23" rows="3"></textarea><br>
            籍贯:
            <select name="place">
                <option value="冀">河北</option>
                <option value="鲁">山东</option>
                <option value="晋">山西</option>
                <option value="粤">广东</option>
            </select>
        </fieldset>
        <input type="hidden" name="from" value="toutiao">
        <br>
        <input type="submit" value="确认">
        <input type="reset" value="点我重置">
        <input type="button" value="检测账户是否被注册">
    </form>
</body>
</html>

6. 总结

目录
相关文章
|
10月前
|
移动开发 HTML5
HTML5 表单属性3
`&lt;input&gt;` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法,这些属性可覆盖 `&lt;form&gt;` 标签中的相应属性,并且主要适用于 `type=&quot;submit&quot;` 和 `type=&quot;image&quot;` 的输入类型。
|
10月前
|
定位技术
时尚的联系我们表单HTML模板(源码)
一款时尚的联系我们表单Html模板,带地图和所在位置,输入基本信息和信息发送,看起来很漂亮的联系我们页面。
299 1
时尚的联系我们表单HTML模板(源码)
|
9月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性7
`pattern` 属性使用正则表达式验证 `&lt;input&gt;` 元素的值,适用于 `text`, `search`, `url`, `tel`, `email`, 和 `password` 类型。
|
9月前
|
移动开发 UED HTML5
HTML5 表单属性6
`min`、`max` 和 `step` 属性用于限制 `&lt;input&gt;` 标签中的数值或日期范围。例如,可以设置日期选择器的最早和最晚日期,或限制数字输入框的值范围。`multiple` 属性允许在 `&lt;input&gt;` 中选择多个值,适用于邮箱和文件类型。这些属性增强了表单控件的功能性和用户体验。
|
10月前
|
移动开发 HTML5
HTML5 表单属性4
`formnovalidate` 属性是一个布尔属性,用于 `&lt;input&gt;` 元素,指示该输入在表单提交时不需验证,可覆盖 `&lt;form&gt;` 元素的 `novalidate` 属性,常与 `type=&quot;submit&quot;` 一起使用。示例中展示了如何通过两个提交按钮(一个使用验证,另一个不使用)实现不同的表单提交方式。
|
9月前
|
移动开发 HTML5
HTML5 表单属性5
`height` 和 `width` 属性用于 `&lt;input&gt;` 标签中的 `image` 类型,定义图像的高度和宽度。
|
10月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性2
`novalidate` 是 HTML `&lt;form&gt;` 元素的布尔属性,用于禁用浏览器的默认表单验证功能。当此属性存在时,浏览器不会检查表单字段是否符合预设的验证规则,允许开发者通过 JavaScript 等手段自定义验证逻辑。
|
9月前
|
移动开发 数据安全/隐私保护 HTML5
HTML5 表单属性8
`required`属性确保表单提交前输入框不能为空,适用于多种类型的 `&lt;input&gt;` 标签,如文本、邮箱、密码等。`step`属性则用于指定输入域中合法数值的间隔,常与`max`和`min`属性配合使用,适用于数字、日期等类型。例如,设置`&lt;input type=&quot;number&quot; step=&quot;3&quot;&gt;`可使输入值以3为单位递增或递减。
|
10月前
|
移动开发 UED HTML5
HTML5 表单属性1
HTML5为&lt;form&gt;和&lt;input&gt;标签引入了多个新属性,增强了表单的功能性和用户体验。其中,&lt;form&gt;新增了autocomplete和novalidate属性;&lt;input&gt;则增加了如autofocus、formaction、placeholder等13个新属性,支持更精细的表单控制和数据验证。例如,autocomplete属性允许表单或输入字段提供自动完成功能,提高用户填写效率。
|
10月前
|
移动开发 UED HTML5
HTML5 表单元素1
HTML5引入了新的表单元素,如`&lt;datalist&gt;`、`&lt;keygen&gt;`和`&lt;output&gt;`,以增强表单的功能性和用户体验。