andishe-wpd/form-attribute.html

## form-attribute.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Form</title>
  <style>
    /* Add some basic styling for better presentation */
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    form {
      max-width: 400px;
      margin: auto;
    }

    label {
      display: block;
      margin-bottom: 5px;
    }

    input, select, textarea {
      width: 100%;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

<form action="/submit" method="post" enctype="multipart/form-data" target="_blank">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Enter your username" required autofocus>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" minlength="6" maxlength="20" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" required>
  <small>Enter a valid email address</small>

  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="18" max="99" step="1" required>
  <small>Must be between 18 and 99</small>

  <label for="gender">Gender:</label>
  <select id="gender" name="gender" required>
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="other">Other</option>
  </select>

  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

  <label for="avatar">Avatar:</label>
  <input type="file" id="avatar" name="avatar" accept="image/*" capture="camera">

  <button type="submit" disabled>Submit</button>
</form>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Sample Form</title>
	<style>
	/* Add some basic styling for better presentation */
	body {
	font-family: Arial, sans-serif;
	margin: 20px;
	}

	form {
	max-width: 400px;
	margin: auto;
	}

	label {
	display: block;
	margin-bottom: 5px;
	}

	input, select, textarea {
	width: 100%;
	margin-bottom: 10px;
	}
	</style>
	</head>
	<body>

	<form action="/submit" method="post" enctype="multipart/form-data" target="_blank">
	<label for="username">Username:</label>
	<input type="text" id="username" name="username" placeholder="Enter your username" required autofocus>

	<label for="password">Password:</label>
	<input type="password" id="password" name="password" minlength="6" maxlength="20" required>

	<label for="email">Email:</label>
	<input type="email" id="email" name="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" required>
	<small>Enter a valid email address</small>

	<label for="age">Age:</label>
	<input type="number" id="age" name="age" min="18" max="99" step="1" required>
	<small>Must be between 18 and 99</small>

	<label for="gender">Gender:</label>
	<select id="gender" name="gender" required>
	<option value="male">Male</option>
	<option value="female">Female</option>
	<option value="other">Other</option>
	</select>

	<label for="message">Message:</label>
	<textarea id="message" name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

	<label for="avatar">Avatar:</label>
	<input type="file" id="avatar" name="avatar" accept="image/*" capture="camera">

	<button type="submit" disabled>Submit</button>
	</form>

	</body>
	</html>