龙空技术网

HTML-表单认识-第三章

星晨128868889 1585

前言:

而今你们对“html自动提交表单”大致比较关心,各位老铁们都需要分析一些“html自动提交表单”的相关知识。那么小编同时在网络上收集了一些关于“html自动提交表单””的相关知识,希望大家能喜欢,我们一起来学习一下吧!

1、表单在网页中的应用:登录、注册常用到表单

2、表单的语法:

<form method="post" action="result.html">

<p> 名字:<input name="name" type="text" > </p>

<p> 密码:<input name="pass" type="password" > </p>

<p>

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

<input type="reset" name="Reset" value="重填“/>

</p>

</form>

3、表单元素说明:

type:指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button,默认为 text.

name:指定表单元素的名称.

value:元素的初始值。type 为 radio时必须指定一个值.

size:指定表单元素的初始宽度。当 type 为 text 或 password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位.

maxlength:type为text 或 password 时,输入的最大字符数.

checked:type为radio或checkbox时,指定按钮是否是被选中.

4、示例:

<html >

<head>

<title>表单元素</title>

</head>

<body>

<!-- 表单 -->

<form method="POST" action="#">

<!-- 标签 -->

<label for="username">姓名:</label>

<!-- 文本框 value属性是设置默认显示的值-->

<input id="username" value="songzetong" />

<!-- 密码框 -->

<br/><label for="pwd">密码:</label>

<input type="password" id="pwd">

<br/>

<!-- 单选框 -->

<label for="sex">性别:</label>

<input type ="radio" name ="sex" checked/>男

<input type ="radio" name ="sex"/>女

<!-- 复选框 -->

<br/>

<label for="hobby">爱好:</label>

<input type="checkbox" name ="hobby" id="hobby"/>听音乐

<input type="checkbox" name ="hobby"/>旅游

<input type="checkbox" name ="hobby"/>游泳

<br/>

<!-- 下拉列表 -->

<label for="month">月份:</label>

<select id="month"/>

<option>1月</option>

<option>2月</option>

<option>3月</option>

</select>

<br/>

<!-- 按钮 -->

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

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

<input type="button" value="普通按钮"/>

<br/>

<!-- 图片按钮 -->

<input type="image" src="one.jpg" width="200px" heigth="200px"/>

<br/>

<button type="submit">提交</button>

<button type="reset">重置</button>

<br/>

<label for="profile">

个人简介:

</label>

<!-- 多行文本域 -->

<textarea >本人已同意什么条款</textarea>

<br/>

<br/>

<br/>

<!-- 文件域 -->

<label for="upload">上传头像:</label>

<input type="file"/>

<!-- 邮箱 -->

<br/>

<label for="QQ邮箱">邮箱:</label>

<input type="email"/>

<br/>

<!-- 网址 -->

<label for="ur">网址:</label>

<input type="url"/>

<!-- 数字 -->

<br/>

<label for="shuzi">数字:</label>

<input type="number" name="shuzi" min="0" max="100" step="10"/>

<br/>

<label for="huakuai">滑块:</label>

<input type="range" />

<!-- 搜索框 -->

<br/>

<label for="sousuo">搜索</label>

<input type="search"/>

<!-- 隐藏域 -->

<br/>

<input type="hidden"value="1">

<!-- 只读:只能看不能修改,禁用:不能用 -->

<input value="我是只读的" readonly/>

<input type="button" value="我是禁用的" disabled/>

<!-- palceholder默认提示 -->

<br/>

<input placeholder="默认提示框"/>

<br/>

<!-- 文本框内容提示不能为空,否则不允许用户提交表单(网页上的必填项) -->

<input required="必填项"/>

<button type="submit">提交</button>

<br/>

<!-- 用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表单-->

<input required pattern="^1[3578]\d{9}"/>

<button type="submit">提交</button>

</form>

</body>

</html>

效果图链接:

标签: #html自动提交表单