DOM之Form对象(二)表单字段元素

HTML的密码域

<html>
<body>
    <form>
        用户:
        <input type="text" name="user">
        <br>
        密码:
        <input type="password" name="password">
    </form>
    <p>
        请注意,当您在密码域中键入字符时,浏览器将使用项目符号来代替这些字符。
    </p>
</body>
</html>

在HTML页中创建文本框,用户可以选中或取消选取复选框

<html>
<body>
    <form>
        我喜欢自行车:
        <input type="checkbox" name="Bike">
        <br>
        我喜欢汽车:
        <input type="checkbox" name="Car">
    </form>
</body>
</html>

在HTML中创建单选按钮

<html>
<body>
    <form>
        男性:
        <input type="radio" checked="checked" name="Sex" value="male">
        <br>
        女性:
        <input type="radio" name="Sex" value="female">
    </form>
    <p>当用户点击一个单选按钮时,该按钮会变为选中状态,其他所有按钮会变为非选中状态。</p>
</body>
</html>

创建一个简单的带有预选值的下拉列表。(注:预选值指预先指定的首选项。)

<html>

<body>

    <form>
        <select name="cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="fiat" selected="selected">Fiat</option>
            <option value="audi">Audi</option>
        </select>
    </form>

</body>
</html>

创建按钮

<html>

<body>

    <form>
        <input type="button" value="Hello world!">
    </form>

</body>
</html>

在数据周围绘制一个带标题的框

<html>

<body>

    <fieldset>
        <legend>健康信息:</legend>
        <form>
            <label>身高:<input type="text" /></label>
            <label>体重:<input type="text" /></label>
        </form>
    </fieldset>

    <p>如果输入表单周围没有边框,说明您的浏览器太老了。</p>

</body>
</html>

从表单发送电子邮件

<html>

<body>
    <form action="http:///[email protected]"
        method="post" enctype="text/plain">

        <h3>这个表单会把电子邮件发送到 W3School。</h3>
        姓名:<br>
        <input type="text" name="name" value="yourname" size="20">
        <br>
        电邮:<br>
        <input type="text" name="mail" value="yourmail" size="20">
        <br>
        内容:<br>
        <input type="text" name="comment" value="yourcomment" size="40">
        <br>
        <br>
        <input type="submit" value="发送">
        <input type="reset" value="重置">
    </form>
</body>
</html>

时间: 2024-12-17 01:31:37

DOM之Form对象(二)表单字段元素的相关文章

{点点滴滴}DOM的Form对象

DOM的Form对象 作者:maybelle0049 Form对象的主要功能就是能够直接访问HTML文档中的Form表单.一个web页面可以有一个或多个Form表单,使用document.forms数组对象可以访问到各个Form表单.可以将<form>标签中嵌入的表单字段元素的名称作为一个form对象的属性,来引用表示这个表单字段字段元素的对象. form对象的方法 ◆ submit方法:该方法是form对象的专用方法,用于向服务器递交表单数据,模拟用户单击<input type=sub

jquery ajax 使用serialize() 表单字段过多导致的问题

jquery ajax 使用serialize() 表单字段过多导致字段不能全部发送,改用了serializeArray()方法,再查下使用方法,暂时没有发现什么问题 // 如:{Name:'摘取天上星',position:'IT技术'} // ps:注意将同名的放在一个数组里 function getFormJson(form) {   var o = {};   var a = $(form).serializeArray();   $.each(a, function () {     i

如何控制表单字段的显示与否(思考中)

这个问题涉及几个场景,分别对待. 1.不依赖于数据本身的场景. 比如,对于不同的文章目录,显示不同的表单格局.这个可以在"目录"或者"站点"对象设置,当添加文章时,根据当前目录,通过以下顺序: 目录设定->站点设定->默认设定.先碰到的设置成为最终设置.(这个已解决) 2.依赖于数据本身. 比如站点的模板文件ftl和其它css,img的在线编辑,在列表页面中所有的对象的列出来,当用户点击编辑的时候就会产生一个问题,如果是可编辑的文件,需要显示2个字段,文

功能表单字段、树形选择数据类型的配置详解——JEPLUS快速开发平台

功能表单字段之下拉框.单选框.多选框.树形选择数据类型的配置详解 JEPLUS平台的表单支持有多种不同的数据类型,这些不同的数据类型在展示不同类型的数据时能有很好的效果,今天这篇笔记就讲解一下下拉框.单选框.复选框.树形选择这四种数据类型的配置详解以及效果展示. 一.下拉框 打开表单数据录入界面,打开具体的目标字段的配置信息 第二种打开目标字段的配置信息方法是打开功能配置选项---->打开表单配置---->双击目标字段,即可打开 打开字段的表单配置信息界面,选择数据类型是"下拉框&q

嵌入式表单字段中的内容可能被服务器更改以删除不安全的内容。是否要重新加载您的页面以查看保存结果?

嵌入式表单字段中的内容可能被服务器更改以删除不安全的内容.是否要重新加载您的页面以查看保存结果? 最近有朋友问到,当他在SharePoint首页上进行编辑时,插入一段代码.完工后保存就遇到了这个问题. 无论选"是"或"否",保存完毕后在设计视图中都看不到效果,查看代码视图,对应的代码也被删除掉了. 这确实是很恼人,好不容易写了那么多东西,结果最后被SPD自己搞没了,如果之前备份了还好,否则,大半天的成果就不翼而飞了. 首先,关于这个问题的定性要清楚.它不是一个错误:

symfony CollectionType类型字段子表单字段移除

工作中我们经常会遇到子表单字段移除工作,哪怎么移除提不想要的子表单字段呢.代码如下 1 public function buildForm(FormBuilderInterface $builder, array $options) 2 { 3 $builder 4 ->add('stocks', CollectionType::class, [ 5 'label' => false, 6 'entry_type' => ProductStockType::class, 7 'entry

DOM之Form对象

当用户点击递交按钮或点击单行文本输入框按下回车键后,表单递交到3w服务器之前就会发生onsubmit()事件,典型用法就是检查form表单收到数据的合法性和完整性,防止将不正确的数据传递给3w服务器 Form 对象的 onsubmit 属性指定了一个事件句柄函数.当用户单击了表单中的 Reset 按钮而提交一个重置时,就会调用这个事件句柄函数.注意,当调用方法Form.submit() 时,该处理器函数不会被调用. 如果 onsubmit 句柄返回 fasle,表单的元素就不会提交.如果该函数返

easy-ui表单字段(单字段---》验证---》整数、小数 、%(同时需要))

// 单字段--->验证--->整数.小数  .%(同时需要) <script> //保底值 $.extend($.fn.validatebox.defaults.rules, {     //此句为自定义重写校验 bottom_value: { validator: function (value) { return /^\d+(\.\d+)?$/i.test(value); }, message: '请输入(整数,小数,百分率),并确保格式正确' }, }); </scr

Django表单字段的验证方式

一.给表单的字段添加验证器 In your forms.py 1 def validate_name(value): 2 try: 3 # 查询存在的话抛出异常 4 User.objects.get(username=value) 5 raise ValueError("%s的用户已经存在"%value) 6 except User.DoesNotExist: 7 pass 8 9 from blogapp.models import User 10 class Loginfm(for