雀恰营销
专注中国网络营销推广

HTML之表单元素

HTML之表单元素

A,表单元素放置在标签中。我们来看看表单的属性

属性值说明

acceptMIME_type 指定通过文件上传提交的文件类型

accept-charsetcharset 服务器处理表单数据接受的字符集

enctypeMIME_type 指定表单数据在发送到服务器之前应如何编码

methodget/post 指定表单数据的发送方式,get方法和post方法

name name 指定表单的名称

target_blank/_parent/_self/_top 指定打开操作 URL 的位置

三个重要的属性说明:

1、action指定表单发送时接受操作的地址

2、method 指定发送表单数据的方法。可选值:获取、发布。发送,表单中的数据将附加到 url 并发送。 post 在 HTTP 请求中发送。

3、enctype 指定表单数据在发送到服务器之前如何编码。特别注意的是在包含上传字段的时候设置编码方式为enctype=”multipart/form-data”,否则后台无法获取浏览器发送的文件数据。是设置表单的 MIME 编码。该编码格式默认为application/x-www-form-urlencoded,不能用于文件上传;仅当使用 multipart/form-data 时,表单中的输入值才以二进制格式传递。为了完成文件数据的传输。通过 FTP 上传大文件时,还可以选择以二进制方式上传。

enctype的三个选项

值说明

application/x-www-form-urlencoded 在发送前对所有字符进行编码(默认)

multipart/form-data 不对字符进行编码。数据以二进制形式发送。当表单包含上传字段时,必须使用后台获取上传的文件。

文本/纯空格转换为“+”加号,但不编码特殊字符。

其他常用说明

属性值描述DTD

标签的accept属性” href=””>accept

mime_type

指定通过文件上传提交的文件类型。

STF

标签的对齐属性” href=””>align

已弃用。指定图像输入的对齐方式。

TF

标签的alt属性” href=””>alt

文字

定义图像输入的替代文本。

p>

STF

checked 的属性

标签” href=””>选中

检查

指定首次加载时应检查此输入元素。

STF

标签的禁用属性” href=””>禁用

禁用

当输入元素被加载时表单元素,这个元素被禁用。

STF

标签的maxlength属性” href=””>maxlength

号码

指定输入字段中字符的最大长度。

STF

标签的name属性” href=””>name

字段名称

定义输入元素的名称。

STF

标签的只读属性” href=””>readonly

只读

指定输入字段是只读的。

STF

标签的size属性” href=””>size

number_of_char

定义输入字段的宽度。

STF

标签的src属性” href=””>src

网址

定义显示为提交按钮的图像的 URL。

STF

标签的type属性” href=””>type

指定输入元素的类型。

STF

value的属性

标签” href=””>值

价值

指定输入元素的值。

STF

B,输入

一、文本字段

<input type="text" name="text" value="" />

二、密码字段

密码类似于文本框HTML之表单元素,但其中输入的内容显示为一个点。

<input type="password" name="text" value="" />

三、单选按钮

男人:<input type="radio" name="sex" value="male" /> Male
<br />
女人:<input type="radio" name="sex" value="female" /> Female

四、@ >复选框

<input type="checkbox" name="check1" value="" />

五、按钮

<input type="button" value="确认" />

六、重置按钮

当点击重置按钮时,重置按钮所在的表单会被清空HTML之表单元素,其他表单不受影响。

<input type="reset" value="重置" />

七、提交按钮

当点击提交按钮时,浏览器会自动提交表单。

<input type="submit" value="提交" />

八、隐藏字段

隐藏字段不显示在浏览器中,只是为了保存一些不太重要的数据存在。

<input type="hidden" value="我是一个隐藏域" />

九、上传域名

<input type="file" value="" />

十、图片按钮

<input type="image" src="123.gif" />

十个一、下拉列表

<select>
   <option value="0">0</option>
   <option value="1">1</option>
   <option value="2">2</option>
</select>     

属性

可选值

说明

禁用

禁用

指定禁用下拉列表。

多个

多个

指定可以选择多个选项。

名字

名字

指定下拉列表的名称。

尺寸

号码

指定下拉列表中可见的选项数量。

十个二、标签

标签元素不会向用户呈现任何特殊效果。但是,它提高了鼠标用户的可用性。如果您单击标签元素内的文本,则会触发此控件。即当用户选择标签时,浏览器会自动关注与标签关联的表单控件。例如,在标签内放置单选按钮时。然后点击标签中的文字也会触发单选按钮,而不是仅仅点击小圆点。

<p><label><input type="radio" name="male" />男人</label></p>
<p><label><input type="radio" name="male" />女人</label></p>

男人和女人

也可以这样写

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

十个三、以只读方式禁用

禁用和只读属性。 readonly 只对 input(text/password) 和 textarea 有效,而 disabled 则对所有表单元素有效,包括 select、radio、checkbox、button 等。但是当 form 元素禁用后,当我们通过 POST 或GET,这个元素的值不会传出去,readonly会把值传出去。

用户按下提交按钮后,可以通过javascript禁用提交按钮,可以防止用户在网络条件较差的环境下重复点击提交按钮,导致数据冗余存储在数据库中.

        <form id="form1" action="/home/index" method="post">
            禁用文本框:<input type="text" disabled="disabled" />
            只读文本框: <input type="text" readonly="readonly" />
        </form>

十四、@>文本区域

属性值描述DTD

标签的cols属性” href =””>cols

号码

指定文本区域的可见宽度。

STF

标签的rows属性” href=””>rows

号码

指定文本区域中可见的行数。

STF

        <form id="form1" action="/home/index" method="post">
            <textarea cols="10" rows="10">我是一个兵,来自老百姓。</textarea>
        </form>

十个五、字段集字段

fieldsets用于对表单元素进行分组表单元素,legend用于设置分组标题

          <fieldset>
            <legend>你的信息?</legend>
            身高: <input type="text" value="180" />
            体重: <input type="text" value="200" />
          </fieldset>

显示效果如下:

下面是一个简单的例子:

        <form id="form1" action="/home/index" method="post">
                  <input type="hidden" value="隐藏信息" />
            账号: <input type="text" maxlength="8" /><br/>
            密码:<input type="password" /><br/>
            姓名:<input type="text" name="Name" /><br/>
            性别: <input type="radio" name="male" />男人
                  <input type="radio" name="male" />女人<br/>
            是否单身: <input type="checkbox" name="single" /> <br/>
            年龄:<select name="age">
                      <option value="0">0-30</option>
                      <option value="1">31-60</option>
                      <option value="2">60-100</option>
                  </select><br/>
            喜欢的花:<select multiple="multiple" name="flower">
                        <option value="0">玫瑰花</option>
                        <option value="1">百合花</option>
                        <option value="2">仙人掌</option>
                        <option value="3">郁金香</option>
                        <option value="4">万寿菊</option>
                     </select> <br/>
            上传照片:<input type="file" /> <br/>
            <input type="image" src="brt_btn.png" /> <br/>
            <input type="button" value="确认" />  <input type="submit" value="提交" />   <input type="reset" value="重置" /><br/>
        </form>

显示效果如下:

赞(0) 打赏
未经允许不得转载:雀恰营销 » HTML之表单元素
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

文章对你有帮助就赞助我一下吧

支付宝扫一扫打赏

微信扫一扫打赏