HTML5 第九章 编辑表单

本文介绍了HTML5中表单的基础用法及各种表单元素的详细配置方法,包括文本输入、密码输入、单选和复选按钮、按钮类型、图像提交、隐藏域、文件上传、列表菜单和文本域等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML5   第九章 编辑表单


Dome 01 表单


<body>
<form action="mailto:mingri@qq.com" name="register" method="post" enctype="text/plain" target="_self">
姓名:
<input type="text" name="username" size="20"/>
    <br/><br/>
    网址:
<input type="text" name="URL" size="20" maxlength="50" value="http://"/>
    <br/><br/>
    密码:
<input type="password" name="password" size="20" maxlength="8"/>
    <br/><br/>
    确认密码:
<input type="qupassword" name="qupassword" size="20" maxlength="8"/>
    <br/><br/>
    城市:
<input type="radio" name="city" value="江苏"/>江苏
    <input type="radio" name="city" value="河北"/>河北
    <input type="radio" name="city" value="北京"/>北京
    <input type="radio" name="city" value="广州"/>广州
    <br/><br/>
    音乐:
<input type="checkbox" name="m1" value="rock"/>摇滚乐
    <input type="checkbox" name="m2" value="jazz"/>爵士乐
    <input type="checkbox" name="m3" value="pop"/>流行乐
    <br/><br/>
    功能按钮:
<input type="button" name="button1" value="普通按钮"/>
    <input type="button" name="close" value="关闭当前窗口" onclick="window.close()"/>
    <input type="button" name="opennew" value="打开窗口" onclick="window.open()"/>
     <br/><br/>
     <input type="submit" name="submit" value="提交"/>
     <input type="reset" name="reset" value="重填"/>
     
</form>
</body>
</html>


//action 处理动作 邮件、网址、相对位置、空
//name 表单名称
//method 传递方式 get或post
get 数据附在URL之后一起发送至服务器  (默认值)
    post 分开发,没有数据长度限制,速度比get慢
//enctype 编码方式
text/plain  以纯文本的形式传送
    application/x-www-form-urlencoded  默认值
    multipart/form-data MIME编码,上传文件的表单必须选择该项


//text 文本字段 
//size 显示的长度,以字符为单位 默认值size="20"
//maxlength 最多可以输入的字符数 默认值maxlength="18"
//value 文本框中的默认值,password中显示“*”


//radio 单选按钮




Dome 02 表单2


<body>
<form action="#" name="form2" method="post">
图像:
    <input type="image" src="images/1.jpg" name="image1"/>
    <input type="image" src="images/2.jpg" name="image2"/>
    <br/><br/>
    隐藏域:
    <input type="hidden" name="from" value="invest"/>
    <br/><br/>
    上传文件:
    <input type="file" name="file"/>
    <br/><br/>
    列表菜单:
    <select name="music" size="4" multiple="multiple">
    <option value="rock" selected="selected">摇滚乐</option>
        <option value="pop">流行乐</option>
        <option value="jazz">爵士乐</option>
        <option value="名族乐">名族乐</option>
     </select>
     <br/><br/>
     <select name="city">
      <option value="beijing" select="selected">北京
        <option value="shanghai">上海
        <option value="nanjing">南京
        <option value="suzhou">苏州
     </select>
     <br/><br/>
     文本域:
     <textarea name="留言" rows="5" cols="40" value="liuyan">请在此留言……
     </textarea> 
     <br/><br/>
     id标识:
     <input type="text" name="username" size="20" id="username"/>
</form>
</body>
</html>


//multiple 列表中的项目多选
//selected 默认选项
//rows 行数 
//cols 列数
//id 用来标记页面的唯一元素  页面不显示,与信息同时提交服务器
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值