模式属性在HTML表格中根本无法使用

问题描述 投票：0回答：1

      <!DOCTYPE html>
     <html lang="en">
     <head>
	<meta charset="UTF-8">
	<title>Form practice</title>
   </head>
    <body><h1>Register</h1>

	<form>
		<label for="first name">First Name</label>
		<input id="first name" type="text" name="first name" placeholder="John" required>


		<label for="last name">Last Name</label>
		<input id="last name" type="text" name="last name" placeholder="Smith" required>

		<div>
		<label for="male">Male</label>
		<input id="male" type="radio" name="gender" value="male">

		<label for="female">Female</label>
		<input id="female" type="radio" name="gender" value="female">

		<label for="other">Other</label>
		<input id="other" type="radio" name="gender" value="other">
		</div>

		<div>
      <label for="email">Email:</label>
      <input type="email" name="email" id="email" required placeholder="your email">

      <label for="password">Password:</label>
      <input type="password" name="password" id="password" pattern=".{5,10}" title="5 to 8 characters" required>
		</div>

		<div>
			<label>
				Birthday:
				<select name="month">
					<option>Month</option>
					<option>Jan</option>
					<option>Feb</option>
					<option>Mar</option>
				</select>
				<select month="day">
					<option>Day</option>
					<option>01</option>
					<option>02</option>
					<option>03</option>
				</select>
				<select month="year">
					<option>Year</option>
					<option>1990</option>
					<option>1991</option>
					<option>1992</option>
				</select>
			</label>
		</div>

		<div>
			<label for="agreed">I agree to the terms and conditions</label>
			<input id="agreed" type="checkbox" name="agreed">
		</div>

	    <input type="submit" name="">
	 </form>
    </body>
    </html>

输入标签中密码的模式属性不起作用，标题属性也不起作用。　只有所需属性在工作。我已经尝试在Chrome和Safari中进行检查.它是否已经被废弃了？我还有什么其他方式可以添加一个最小长度的验证（除了使用JS）？

html validation design-patterns attributes deprecated
1个回答
1
投票

我不知道问题出在哪里。我复制了你的代码，在我这端工作正常，除非我误解了你的问题。你能进一步解释一下你遇到的问题吗？我在Chrome和Firefox中都进行了测试。

password min/max characters

和标题。

enter image description here

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.