HTML form ਵੈਬ ਡਿਵੈਲਪਮੈਂਟ ਦਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਹਿੱਸਾ ਹੈ ਜੋ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਇੱਕ ਵੈਬਸਾਈਟ ਨਾਲ ਇੰਟਰੈਕਟ ਕਰਨ ਅਤੇ ਇੱਕ ਸਰਵਰ ਨੂੰ ਡੇਟਾ ਜਮ੍ਹਾਂ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। Form ਦੀ ਵਰਤੋਂ ਵਿਸਤ੍ਰਿਤ ਉਦੇਸ਼ਾਂ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਜਿਵੇਂ ਕਿ ਉਪਯੋਗਕਰਤਾ ਨੂੰ ਇਕੱਠਾ ਕਰਨਾ form, ਉਪਭੋਗਤਾ ਇੰਪੁੱਟ ਦੀ ਪ੍ਰਕਿਰਿਆ ਕਰਨਾ, ਅਤੇ ਇੱਕ ਵੈਬਸਾਈਟ 'ਤੇ ਉਪਭੋਗਤਾ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਨੂੰ ਸਮਰੱਥ ਕਰਨਾ। ਇਸ ਲੇਖ ਵਿੱਚ, ਅਸੀਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਵੱਖ-ਵੱਖ ਕਿਸਮਾਂ ਦੇ ਇਨਪੁਟ ਖੇਤਰਾਂ ਦੀ ਪੜਚੋਲ ਕਰਾਂਗੇ, HTML ਵਿੱਚ ਆਮ ਤੌਰ 'ਤੇ ਵਰਤੇ ਜਾਂਦੇ ਤੱਤ, ਟੈਕਸਟਰੇਅਸ ਅਤੇ ਬਟਨਾਂ ਦੀ ਚੋਣ ਕਰਾਂਗੇ form ।
ਇਨਪੁਟ ਖੇਤਰ
<input type="text">: ਇੱਕ ਟੈਕਸਟ ਇਨਪੁਟ ਖੇਤਰ ਬਣਾਉਂਦਾ ਹੈ ਜਿੱਥੇ ਉਪਭੋਗਤਾ ਅਲਫਾਨਿਊਮੇਰਿਕ ਅੱਖਰ ਦਾਖਲ ਕਰ ਸਕਦੇ ਹਨ।<input type="password">: ਇੱਕ ਪਾਸਵਰਡ ਇਨਪੁਟ ਖੇਤਰ ਦਿਖਾਉਂਦਾ ਹੈ ਜੋ ਦਰਜ ਕੀਤੇ ਅੱਖਰਾਂ ਨੂੰ ਮਾਸਕ ਕਰਦਾ ਹੈ।<input type="email">: ਇਨਪੁਟ ਖੇਤਰਾਂ ਲਈ ਈਮੇਲ ਪ੍ਰਮਾਣਿਕਤਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਲਈ ਇੱਕ ਵੈਧ ਈਮੇਲ ਪਤੇ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।<input type="number">: ਇਨਪੁਟ ਨੂੰ ਸਿਰਫ ਸੰਖਿਆਤਮਕ ਮੁੱਲਾਂ ਤੱਕ ਸੀਮਤ ਕਰਦਾ ਹੈ।<input type="checkbox">: ਇੱਕ ਚੈਕਬਾਕਸ ਦੀ ਨੁਮਾਇੰਦਗੀ ਕਰਦਾ ਹੈ ਜਿਸਨੂੰ ਉਪਭੋਗਤਾ ਚੁਣ ਸਕਦੇ ਹਨ ਜਾਂ ਅਣ-ਚੁਣ ਸਕਦੇ ਹਨ।<input type="radio">: ਇੱਕ ਰੇਡੀਓ ਬਟਨ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਜੋ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਵਿਕਲਪਾਂ ਦੇ ਸਮੂਹ ਵਿੱਚੋਂ ਇੱਕ ਵਿਕਲਪ ਚੁਣਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।<input type="file">: ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਫਾਈਲਾਂ ਨੂੰ ਚੁਣਨ ਅਤੇ ਅਪਲੋਡ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ।<input type="submit">: ਇੱਕ ਬਟਨ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ ਜੋ form ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਸਬਮਿਟ ਕਰਦਾ ਹੈ।<input type="reset">: ਇੱਕ ਬਟਨ ਦਿਖਾਉਂਦਾ ਹੈ ਜੋ ਇਸਨੂੰ form ਇਸਦੀ ਸ਼ੁਰੂਆਤੀ ਸਥਿਤੀ ਵਿੱਚ ਰੀਸੈਟ ਕਰਦਾ ਹੈ।<input type="date">: ਮਿਤੀਆਂ ਦੀ ਚੋਣ ਕਰਨ ਲਈ ਇੱਕ ਮਿਤੀ ਚੋਣਕਾਰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।<input type="time">: ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਮੇਂ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਇਨਪੁਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।
ਐਲੀਮੈਂਟਸ ਚੁਣੋ
<select>: ਚੋਣਯੋਗ ਵਿਕਲਪਾਂ ਦੇ ਨਾਲ ਇੱਕ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਬਣਾਉਂਦਾ ਹੈ।<option>: ਟੈਗ ਦੇ ਅੰਦਰ ਰੱਖੇ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਦੇ ਅੰਦਰ ਇੱਕ ਵਿਕਲਪ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ<select>।<optgroup>: ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਦੇ ਅੰਦਰ ਸਮੂਹ ਸਬੰਧਤ ਵਿਕਲਪ ਇਕੱਠੇ ਕਰੋ।<select multiple>: ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਕਲਿੱਕ ਕਰਨ ਵੇਲੇ Ctrl ਕੁੰਜੀ(ਜਾਂ Mac 'ਤੇ ਕਮਾਂਡ ਕੁੰਜੀ) ਨੂੰ ਦਬਾ ਕੇ ਰੱਖ ਕੇ ਇੱਕੋ ਸਮੇਂ ਕਈ ਵਿਕਲਪਾਂ ਦੀ ਚੋਣ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
ਟੈਕਸਟਰੇਅਸ
<textarea>: ਇੱਕ ਮਲਟੀਲਾਈਨ ਟੈਕਸਟ ਇਨਪੁਟ ਖੇਤਰ ਬਣਾਉਂਦਾ ਹੈ ਜਿੱਥੇ ਉਪਭੋਗਤਾ ਟੈਕਸਟ ਦੇ ਲੰਬੇ ਬਲਾਕਾਂ ਨੂੰ ਦਾਖਲ ਅਤੇ ਸੰਪਾਦਿਤ ਕਰ ਸਕਦੇ ਹਨ। rows ਇਸ ਦਾ ਆਕਾਰ ਬਦਲਿਆ ਜਾ ਸਕਦਾ ਹੈ ਅਤੇ cols ਇਸ ਦੇ ਮਾਪਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ ਸੰਰਚਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ।
ਬਟਨ
<button>: ਇੱਕ ਬਟਨ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਜੋ ਇੱਕ ਦੇ ਅੰਦਰ ਵੱਖ-ਵੱਖ ਕਾਰਵਾਈਆਂ ਨੂੰ ਚਾਲੂ ਕਰ ਸਕਦਾ ਹੈ form । ਇਸਦੀ ਵਰਤੋਂ ਇੱਕ form, form ਇੱਕ JavaScript ਫੰਕਸ਼ਨ ਪ੍ਰਤੀ, ਜਾਂ ਇੱਕ ਵੱਖਰੇ ਪੰਨੇ 'ਤੇ ਨੈਵੀਗੇਟ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ।
ਉਦਾਹਰਨ ਵਰਤੋਂ:
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<label for="newsletter">Subscribe to Newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="color">Favorite Color:</label>
<select id="color" name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<button type="submit">Submit</button>
</form>
ਇਹ ਉਦਾਹਰਨ ਖੇਤਰਾਂ,, , ਅਤੇ ਇੱਕ ਬਟਨ form ਸਮੇਤ ਵੱਖ-ਵੱਖ ਤੱਤਾਂ ਦੀ ਵਰਤੋਂ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ । ਆਪਣੀਆਂ ਖਾਸ ਲੋੜਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਤੱਤ ਅਤੇ ਗੁਣਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਲਈ ਸੁਤੰਤਰ ਮਹਿਸੂਸ ਕਰੋ । input textarea checkbox select dropdown submit form