El objeto URL de entrada en HTML DOM representa un elemento <input> con el atributo type = «url». Se puede acceder al elemento con tipo url usando el método getElementById().
Sintaxis:
document.getElementById("id");
donde id se asigna a la etiqueta <input>.
Valores de propiedad:
- list: Devuelve la referencia de la lista de datos que contiene el campo URL.
- formulario: Devuelve la referencia del formulario que contiene el campo URL.
- autocompletar: Se utiliza para establecer o devolver el valor del atributo de autocompletar de un campo URL.
- enfoque automático: se usa para establecer o regresar si el campo URL debe enfocarse automáticamente cuando se carga la página.
- defaultvalue: Se utiliza para establecer o devolver el valor predeterminado de un campo URL.
- disabled: se utiliza para establecer o devolver si un campo de URL está deshabilitado o no.
- maxLength: Se utiliza para establecer o devolver el valor del atributo maxlength de un campo URL.
- nombre: Se utiliza para establecer o devolver el valor del atributo de nombre de un campo URL.
- patrón: Se utiliza para establecer o devolver el valor del atributo patrón de un campo URL.
- marcador de posición: se utiliza para establecer o devolver el valor del atributo de marcador de posición de un campo de URL.
- readOnly: Se utiliza para establecer o devolver si el campo URL es de solo lectura o no.
- requerido: Se utiliza para establecer o devolver si el campo URL debe ser llenado antes de enviar un formulario.
- tamaño: se utiliza para establecer o devolver el valor del atributo de tamaño del campo URL.
- type: Devuelve el tipo de elemento de formulario al que pertenece el campo URL.
- value: Se utiliza para establecer o devolver el valor del atributo value de un campo URL.
Métodos
- focus() : se utiliza para enfocar el campo de URL de entrada.
- desenfoque(): se utiliza para eliminar el foco del campo URL.
- select() : Se utiliza para seleccionar el contenido del campo URL de entrada.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Input URL Object
</title>
</head>
<body>
<center>
<h1 style = "color:green;">
GeeksForGeeks
</h1>
<h2>DOM Input URL Object</h2>
<label for = "uname" style = "color:green">
<b>Enter URL</b>
</label>
<input type = "url" id = "gfg"
placeholder = "Enter URL">
<br><br>
<button type = "button" onclick = "geeks()">
Click
</button>
<p id = "GFG"></p>
<script>
function geeks() {
var link = document.getElementById("gfg").value;
document.getElementById("GFG").innerHTML = link;
}
</script>
</center>
</body>
</html>
Salida:
Antes Haga clic en el botón:
Después de hacer clic en el botón:
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Input URL Object
</title>
</head>
<body>
<h1>
GeeksForGeeks
</h1>
<h2>DOM Input URL Object </h2>
<label>
<b>Enter URL</b>
</label>
<button type = "button" onclick = "myGeeks()">
Click
</button>
<p id="GFG"></p>
<script>
function myGeeks() {
var link = document.createElement("INPUT");
link.setAttribute("type", "url");
link.setAttribute("value", "https://www.geeksforgeeks.org");
document.body.appendChild(link);
}
</script>
</body>
</html>
Salida:
Antes Haga clic en el botón:
Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por bestharadhakrishna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA