本文介绍了HTML5中表单的基础用法及各种表单元素的详细配置方法，包括文本输入、密码输入、单选和复选按钮、按钮类型、图像提交、隐藏域、文件上传、列表菜单和文本域等。
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 用来标记页面的唯一元素 页面不显示，与信息同时提交服务器
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 用来标记页面的唯一元素 页面不显示，与信息同时提交服务器
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
