新手前段3

真不错1

于 2023-02-13 16:19:06 发布

阅读量92

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_74270404/article/details/128960372

版权

本文介绍了HTML5中<form>标签的使用以及<input>标签的各种属性和类型，包括文本框、密码框、单选按钮、复选框、按钮、文件域、邮箱、网址、数字、滑块、搜索框。此外，还讨论了列表框、多行文本域、表单的隐藏域、只读与禁用状态，以及表单验证的方法，如placeholder、required和pattern属性。

摘要由CSDN通过智能技术生成

初识表格

1.表单标签及表单属性

在HTML5中，< form>标签用于为用户创建表单，以实现用户信息的收集和传递，其他标签必须在它的范围内才有效。

<form action="URL地址" method="提交方式"
	<!--各种表单控件>
</form>

2.< input>标签的常用属性及其格式

在HTML5中，< form>标签用于搜集用户信息，根据其不同的type属性值，< input>标签拥有多种输入类型。

1.文本框
文本框用于输入单行的文本信息。

<body>
	<form>
		<p>名字：<input type="text" name="firstName"size="30"maxlength="20"></p>
	</form>
</body>

2.密码框

在实际的表单登录或注册操作。

<form>
	<p>密码：<input type="paddword"></P>
</form>

3.单选按钮

在网站注册用。

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

4.复选框

<form>
	<p><input type="checkbox" name="languge" value="Chinese" checked>中文</p>
	<p><input type="checkbox" name="languge" value="English" checked>英文</p>
</form>

5.按钮

<form>
	<input type="button" value="普通按钮" onclick="alert"(this.value)">
	<input type="submit" value="提交按钮">
	<input type="reset" value="重置按钮">
	<input type="image" src="images/pic.jpg">
</form>

6.文件域
文件域用于文件的上传。

<form>
	<p><input type="file"></p>
	<p><input type="submit" value="上传"></p>
</form>

7.邮箱

<form>
	<p>邮箱<input type="email"></p>
	<p><input type="submit" value="提交"></p>
</form>

8.网址

<form>
	<p>网址：<input type="url"></p>
	<p><input type="submit" value="提交"></p>
</form>

9.数字

number类型的input元素提供用于输入数字的文本框。

属性	属性值	描述
max	number	规定允许的最大值
min	number	规定允许的最小值
value	number	规定的默认值
step	number	规定输入字段的合法数字间隔

<form>
	<p>数字：<input type="number" min="10" max="100" step="2"></p>
	<p><input type="submit" value="提交"></p>
</form>

10.滑块

<form>
	<p>滑块：<input type="range" min="10" max="100" step="10"></p>
</form>

11.搜索框

search类型的input元素提供用于输入搜索关键词的搜索框。

<form>
	<p>搜索框：<input type="search"></p>
</form>

3.列表框和多行文本域

1.列表框

列表框用于提供一组数据项，它是通过标签好标签现实的。

<select name="city"指定列表名称>
	<option value="北京" selected="selected">北京</option>
	<option value="上海">上海</option>
</select>

2.多行文本域

<textarea name="textarea" cols="50"显示的宽度 rows="10"显示的高度>
</textarea>

4.表单的高级应用

1.表单的隐藏域

<form method="get">
	<p>账号：<input type="text" name="user"></p>
	<p>密码：<input type="password" name="padd"></p>
	<p><input type="hidden" value="123" name="userID"></p>
	<p><input type="submit" value="提交"></p>
</form>

2.表单的只读与禁用

<form method="get">
	<p>账号：<input type="text" name="user" value="Marry" readonly></p>
	<p>密码：<input type="password" name="padd"></p>
	<p><input type="submit" value="提交" disabled></p>
</form>

3.表单元素的标注

为了提高用户体验并增强鼠标的可用性，可以对鼠标进行标注。

<label for="表单元素的id">标注的文本</label>

5.表单验证

1.placeholder属性

placeholder属性用于为input类型的文本框提供一种提示，这种提示可以是文本框期待用户输入何种内容。

<form>
	账号：<input type="text" placeholder="例如：张三">
</form>

2.required属性

required属性用于规定在输入框中填写的内容不能为空，否则不允许用户提交表单。

<form method="get">
	<p>账号：<input type="text" required></p>
	<p><input type="submit" value="提交"></p>
</form>

3.pattern属性

pattern属性用于验证在input类型输入框中，用户输入的内容是否与所定义的正则表达式想匹配。该属性适用的input类型有text、password、email、search、url等。

<form>
	<p>
		请输入你的账号：
		<input type="text" name="user" pattern="^[a-zA-z0-9_-]{4,16}$"></p>4~16位（字母、数字、——、-）
	</p>
	<p><input type="submit" value="提交"></p>
</form>