Scribd
Cargar
0 vistas5 páginas

code1

Este documento presenta un ejemplo de un formulario en HTML5 y PHP que permite a los usuarios ingresar texto, enviarlo y mostrarlo en la misma página. Incluye características como validación básica, protección contra XSS y un diseño responsivo. Se instruye al usuario sobre cómo guardar y ejecutar el archivo en un servidor PHP.

Cargado por

noehh414
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
0 vistas5 páginas

code1

Este documento presenta un ejemplo de un formulario en HTML5 y PHP que permite a los usuarios ingresar texto, enviarlo y mostrarlo en la misma página. Incluye características como validación básica, protección contra XSS y un diseño responsivo. Se instruye al usuario sobre cómo guardar y ejecutar el archivo en un servidor PHP.

Cargado por

noehh414
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

Aquí tienes un ejemplo sencillo y funcional de **HTML5 + PHP** para:

1. Ingresar texto en una caja de texto.

2. Enviar el formulario.

3. Mostrar (imprimir) los datos ingresados.

### Archivo: `[Link]`

```php

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-


scale=1.0">

<title>Ingresar y mostrar texto</title>

<style>

body {

font-family: Arial, sans-serif;

max-width: 500px;

margin: 50px auto;

padding: 20px;

background-color: #f4f4f4;

form {

background: white;

padding: 20px;
border-radius: 8px;

box-shadow: 0 2px 5px rgba(0,0,0,0.1);

label {

display: block;

margin-bottom: 8px;

font-weight: bold;

input[type="text"] {

width: 100%;

padding: 10px;

margin-bottom: 15px;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

button {

background-color: #4CAF50;

color: white;

padding: 10px 20px;

border: none;

border-radius: 4px;

cursor: pointer;

font-size: 16px;

button:hover {

background-color: #45a049;
}

.resultado {

margin-top: 25px;

padding: 15px;

background: #e8f5e9;

border-left: 5px solid #4CAF50;

border-radius: 4px;

</style>

</head>

<body>

<h2>Ingresar texto</h2>

<form method="POST" action="">

<label for="texto">Escribe algo:</label>

<input type="text" id="texto" name="texto" placeholder="Escribe


aquí..." required>

<button type="submit">Enviar</button>

</form>

<?php

// Verificar si se envió el formulario

if ($_SERVER["REQUEST_METHOD"] == "POST") {

// Obtener el valor del campo de texto y limpiarlo

$texto = htmlspecialchars(trim($_POST["texto"]));
if (!empty($texto)) {

echo '<div class="resultado">';

echo '<h3>Datos ingresados:</h3>';

echo '<p><strong>Texto:</strong> ' . $texto . '</p>';

echo '</div>';

} else {

echo '<div class="resultado" style="background:#ffebee;


border-color:#f44336;">';

echo '<p>No se ingresó ningún texto.</p>';

echo '</div>';

?>

</body>

</html>

```

### Cómo usarlo:

1. Guarda el código en un archivo llamado `[Link]`.

2. Colócalo en un servidor con PHP (XAMPP, WAMP, Laragon, o un


hosting).

3. Ábrelo en el navegador (`[Link]

4. Escribe texto en la caja y pulsa **Enviar**.

5. Verás el texto que ingresaste debajo del formulario.


### Características incluidas:

- HTML5 válido.

- Formulario con método `POST`.

- Validación básica (`required`).

- Protección contra XSS con `htmlspecialchars()`.

- Diseño limpio y responsive.

- Muestra el resultado solo después de enviar el formulario.

¿Quieres que también te agregue más campos (nombre, email, etc.),


validaciones extras o que se guarde en una base de datos?

También podría gustarte