第八篇

最新推荐文章于 2024-05-18 12:16:16 发布

a530609250

最新推荐文章于 2024-05-18 12:16:16 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/a530609250/article/details/86906567

版权

HTML5的表单元素
表单应用较为广泛，如注册信息，用户名密码这都是典型的表单应用。
创建表单后，需要在其中放置控件以接收用户的输入，这些控件一般放在… 之间。标签有属性，action表示处理表单输出的程序，点击提交后，action所指定的程序处理，还有一个method指定向服务器的方法，语法为method=(get|post).
一个最基本的表单：

<form method="post" ><p ID="sss">名字：<input name="name" type="text"/></p>
    密码:<input name="pass" type="password"/></p>
    <p>
        <input type="submit" name="Button" value="提交"/>
    <input type="reset" name="Reset" value="重填"/></p>
</form>

表单元素input，input能实现很多功能，他有许多属性，type指定表单的类型，如text，password，radio，reset等等。name指定表单元素的名称，如几个文本框，可用名称来标识他们，value是可选属性，他指定表单元素的初始值，如果type是radio值，则必须指定一个值。size指定表单元素的初始宽度，maxlength指定在text和password中最大字符数，默认值为无限大。checked用于指定按钮是否是被选中的。

表单元素：text文本框，password密码框，单选按钮radio，复选框Checkbox，列表框option，一些按钮：reset为重置，submit为传递数据，button为普通按钮，需要关联事件。
多行文本域：textarea。文件域：file。邮箱email。网址URL 数字number，滑块range，搜索框search。
表单验证：placeholder为一种提示输入空时显示，写入内容后消失。required表示必填项，该文本框不能为空。pattern表示正则表达式，可以自己写规则，该代码用于匹配用户输入的和规则是否一样，如果否，则不能提交表单。
以下代码能示例这些：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>申请表</h1>
<p>姓名：<input type="text"/></p>
<p>教育程度<input name="gen" type="radio" value="硕士" checked/>硕士
    <input name="gen" type="radio" value="博士"/>博士</p>
<p>常用邮箱：<input name="you" type="email"/></p>
<p>性别<input name="gan" type="radio" value="男" />男
<input name="gan" type="radio" value="女"/>女</p>
<p>年龄：<input name="year" type="text"/></p>
<p>月薪：<input name="money" type="text"/></p>
<p>附注：
    <textarea rows="6" placeholder="请在这里键入附注"></textarea></p>
<p>国籍：<select name="guoji" size="1"><option value="">美国</option>
    <option value="1" selected="selected" >澳大利亚</option>
    <option value="2">日本</option>
    <option value="3">新加坡</option></select></p>
<p><input type="submit" name="Button" value="提交"/>
    <input type="reset" name="Reset" value="重填"/>
</p></form>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<form>
 <label for="male">Male</label>
    <input type="radio" name="sex" id="male">
    <label for="a">a</label>
    <input type="radio" name="sex" id="a">
    <select>
        document.write("<h1>This is a heading</h1>");
    </select>

</form>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>电子产品调查表</h1>
<p>姓名：<input type="text" placeholder="输入必须是2-6位字符" size="30" maxlength="6"minlength="2"/></p>
<p>购买日期:<input name="gen" type="text" />年<select name="bmon"><option value="">[选择月份]</option>
    <option value="1">一月</option>
    <option value="2">二月</option>
    <option value="3">三月</option>
    <option value="4">四月</option>
    <option value="5">五月</option>
    <option value="6">六月</option>
    <option value="7">七月</option>
    <option value="8">八月</option>
    <option value="9">九月</option>
    <option value="10">十月</option>
    <option value="11">十一月</option>
    <option value="12">十二月</option>
</select>月<select><option value="">选择日期</option>
    <option value="1">一</option>
    <option value="2">二</option>
    <option value="3">三</option>
    <option value="4">四</option></select>日
   </p>
<p>电子邮箱地址：<input name="you" type="email" placeholder="www.6454@qq.com"/></p>
<p>手机号<input type="text" placeholder="必须是13 15 17 开头的11位数字" maxlength="11" size="30" required pattern="^1[358]/d{9}"></p>
<p>您是否查看过我们的在线产品目录？<input name="gan" type="radio" value="是" checked="checked"/>是
    <input name="gan" type="radio" value="否"/>否</p>
<p>如果查看过，您对哪些产品有兴趣购买？（选择提供的产品）</p></p><p><input type="checkbox" name="fuxuan" value="dianshi"/>大屏幕电视机
    <input type="checkbox" name="fuxuan" value="yinp"/>音频设备
    <input type="checkbox" name="fuxuan" value="ship"/>视频设备
    <input type="checkbox" name="fuxuan" value="xiangj"/>相机</p>

<p>在填写订单之前，您还有什么建议或者意见</p>
<p><textarea rows="6" placeholder="您的输入"></textarea></p>
<p><input type="submit" name="Button" value="提交"/>
    <input type="reset" name="Reset" disabled value="重填"/>
    
</p></form>


</body>
</html>