优秀的编程知识分享平台

网站首页 > 技术文章 正文

HTML-表单认识-第三章（html表单的作用）

nanyue 2024-10-07 11:12:52 技术文章 12 ℃

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>


效果图链接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlThree/form.html

Tags：

猜你喜欢

最近发表
标签列表